UNPKG

410 kBJavaScriptView Raw
1/**
2 * Make a map and return a function for checking if a key
3 * is in that map.
4 * IMPORTANT: all calls of this function must be prefixed with
5 * \/\*#\_\_PURE\_\_\*\/
6 * So that rollup can tree-shake them if necessary.
7 */
8function makeMap(str, expectsLowerCase) {
9 const map = Object.create(null);
10 const list = str.split(',');
11 for (let i = 0; i < list.length; i++) {
12 map[list[i]] = true;
13 }
14 return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];
15}
16
17const GLOBALS_WHITE_LISTED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
18 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
19 'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt';
20const isGloballyWhitelisted = /*#__PURE__*/ makeMap(GLOBALS_WHITE_LISTED);
21
22function normalizeStyle(value) {
23 if (isArray(value)) {
24 const res = {};
25 for (let i = 0; i < value.length; i++) {
26 const item = value[i];
27 const normalized = isString(item)
28 ? parseStringStyle(item)
29 : normalizeStyle(item);
30 if (normalized) {
31 for (const key in normalized) {
32 res[key] = normalized[key];
33 }
34 }
35 }
36 return res;
37 }
38 else if (isString(value)) {
39 return value;
40 }
41 else if (isObject(value)) {
42 return value;
43 }
44}
45const listDelimiterRE = /;(?![^(]*\))/g;
46const propertyDelimiterRE = /:([^]+)/;
47const styleCommentRE = /\/\*.*?\*\//gs;
48function parseStringStyle(cssText) {
49 const ret = {};
50 cssText
51 .replace(styleCommentRE, '')
52 .split(listDelimiterRE)
53 .forEach(item => {
54 if (item) {
55 const tmp = item.split(propertyDelimiterRE);
56 tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
57 }
58 });
59 return ret;
60}
61function normalizeClass(value) {
62 let res = '';
63 if (isString(value)) {
64 res = value;
65 }
66 else if (isArray(value)) {
67 for (let i = 0; i < value.length; i++) {
68 const normalized = normalizeClass(value[i]);
69 if (normalized) {
70 res += normalized + ' ';
71 }
72 }
73 }
74 else if (isObject(value)) {
75 for (const name in value) {
76 if (value[name]) {
77 res += name + ' ';
78 }
79 }
80 }
81 return res.trim();
82}
83function normalizeProps(props) {
84 if (!props)
85 return null;
86 let { class: klass, style } = props;
87 if (klass && !isString(klass)) {
88 props.class = normalizeClass(klass);
89 }
90 if (style) {
91 props.style = normalizeStyle(style);
92 }
93 return props;
94}
95
96// These tag configs are shared between compiler-dom and runtime-dom, so they
97// https://developer.mozilla.org/en-US/docs/Web/HTML/Element
98const HTML_TAGS = 'html,body,base,head,link,meta,style,title,address,article,aside,footer,' +
99 'header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,' +
100 'figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,' +
101 'data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,' +
102 'time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,' +
103 'canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,' +
104 'th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,' +
105 'option,output,progress,select,textarea,details,dialog,menu,' +
106 'summary,template,blockquote,iframe,tfoot';
107// https://developer.mozilla.org/en-US/docs/Web/SVG/Element
108const SVG_TAGS = 'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' +
109 'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' +
110 'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' +
111 'feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' +
112 'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' +
113 'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' +
114 'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' +
115 'mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,' +
116 'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
117 'text,textPath,title,tspan,unknown,use,view';
118/**
119 * Compiler only.
120 * Do NOT use in runtime code paths unless behind `true` flag.
121 */
122const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS);
123/**
124 * Compiler only.
125 * Do NOT use in runtime code paths unless behind `true` flag.
126 */
127const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS);
128
129/**
130 * On the client we only need to offer special cases for boolean attributes that
131 * have different names from their corresponding dom properties:
132 * - itemscope -> N/A
133 * - allowfullscreen -> allowFullscreen
134 * - formnovalidate -> formNoValidate
135 * - ismap -> isMap
136 * - nomodule -> noModule
137 * - novalidate -> noValidate
138 * - readonly -> readOnly
139 */
140const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
141const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
142/**
143 * Boolean attributes should be included if the value is truthy or ''.
144 * e.g. `<select multiple>` compiles to `{ multiple: '' }`
145 */
146function includeBooleanAttr(value) {
147 return !!value || value === '';
148}
149
150function looseCompareArrays(a, b) {
151 if (a.length !== b.length)
152 return false;
153 let equal = true;
154 for (let i = 0; equal && i < a.length; i++) {
155 equal = looseEqual(a[i], b[i]);
156 }
157 return equal;
158}
159function looseEqual(a, b) {
160 if (a === b)
161 return true;
162 let aValidType = isDate(a);
163 let bValidType = isDate(b);
164 if (aValidType || bValidType) {
165 return aValidType && bValidType ? a.getTime() === b.getTime() : false;
166 }
167 aValidType = isSymbol(a);
168 bValidType = isSymbol(b);
169 if (aValidType || bValidType) {
170 return a === b;
171 }
172 aValidType = isArray(a);
173 bValidType = isArray(b);
174 if (aValidType || bValidType) {
175 return aValidType && bValidType ? looseCompareArrays(a, b) : false;
176 }
177 aValidType = isObject(a);
178 bValidType = isObject(b);
179 if (aValidType || bValidType) {
180 /* istanbul ignore if: this if will probably never be called */
181 if (!aValidType || !bValidType) {
182 return false;
183 }
184 const aKeysCount = Object.keys(a).length;
185 const bKeysCount = Object.keys(b).length;
186 if (aKeysCount !== bKeysCount) {
187 return false;
188 }
189 for (const key in a) {
190 const aHasKey = a.hasOwnProperty(key);
191 const bHasKey = b.hasOwnProperty(key);
192 if ((aHasKey && !bHasKey) ||
193 (!aHasKey && bHasKey) ||
194 !looseEqual(a[key], b[key])) {
195 return false;
196 }
197 }
198 }
199 return String(a) === String(b);
200}
201function looseIndexOf(arr, val) {
202 return arr.findIndex(item => looseEqual(item, val));
203}
204
205/**
206 * For converting {{ interpolation }} values to displayed strings.
207 * @private
208 */
209const toDisplayString = (val) => {
210 return isString(val)
211 ? val
212 : val == null
213 ? ''
214 : isArray(val) ||
215 (isObject(val) &&
216 (val.toString === objectToString || !isFunction(val.toString)))
217 ? JSON.stringify(val, replacer, 2)
218 : String(val);
219};
220const replacer = (_key, val) => {
221 // can't use isRef here since @vue/shared has no deps
222 if (val && val.__v_isRef) {
223 return replacer(_key, val.value);
224 }
225 else if (isMap(val)) {
226 return {
227 [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val]) => {
228 entries[`${key} =>`] = val;
229 return entries;
230 }, {})
231 };
232 }
233 else if (isSet(val)) {
234 return {
235 [`Set(${val.size})`]: [...val.values()]
236 };
237 }
238 else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
239 return String(val);
240 }
241 return val;
242};
243
244const EMPTY_OBJ = Object.freeze({})
245 ;
246const EMPTY_ARR = Object.freeze([]) ;
247const NOOP = () => { };
248/**
249 * Always return false.
250 */
251const NO = () => false;
252const onRE = /^on[^a-z]/;
253const isOn = (key) => onRE.test(key);
254const isModelListener = (key) => key.startsWith('onUpdate:');
255const extend = Object.assign;
256const remove = (arr, el) => {
257 const i = arr.indexOf(el);
258 if (i > -1) {
259 arr.splice(i, 1);
260 }
261};
262const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
263const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
264const isArray = Array.isArray;
265const isMap = (val) => toTypeString(val) === '[object Map]';
266const isSet = (val) => toTypeString(val) === '[object Set]';
267const isDate = (val) => toTypeString(val) === '[object Date]';
268const isRegExp = (val) => toTypeString(val) === '[object RegExp]';
269const isFunction = (val) => typeof val === 'function';
270const isString = (val) => typeof val === 'string';
271const isSymbol = (val) => typeof val === 'symbol';
272const isObject = (val) => val !== null && typeof val === 'object';
273const isPromise = (val) => {
274 return isObject(val) && isFunction(val.then) && isFunction(val.catch);
275};
276const objectToString = Object.prototype.toString;
277const toTypeString = (value) => objectToString.call(value);
278const toRawType = (value) => {
279 // extract "RawType" from strings like "[object RawType]"
280 return toTypeString(value).slice(8, -1);
281};
282const isPlainObject = (val) => toTypeString(val) === '[object Object]';
283const isIntegerKey = (key) => isString(key) &&
284 key !== 'NaN' &&
285 key[0] !== '-' &&
286 '' + parseInt(key, 10) === key;
287const isReservedProp = /*#__PURE__*/ makeMap(
288// the leading comma is intentional so empty string "" is also included
289',key,ref,ref_for,ref_key,' +
290 'onVnodeBeforeMount,onVnodeMounted,' +
291 'onVnodeBeforeUpdate,onVnodeUpdated,' +
292 'onVnodeBeforeUnmount,onVnodeUnmounted');
293const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo');
294const cacheStringFunction = (fn) => {
295 const cache = Object.create(null);
296 return ((str) => {
297 const hit = cache[str];
298 return hit || (cache[str] = fn(str));
299 });
300};
301const camelizeRE = /-(\w)/g;
302/**
303 * @private
304 */
305const camelize = cacheStringFunction((str) => {
306 return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
307});
308const hyphenateRE = /\B([A-Z])/g;
309/**
310 * @private
311 */
312const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());
313/**
314 * @private
315 */
316const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
317/**
318 * @private
319 */
320const toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``);
321// compare whether a value has changed, accounting for NaN.
322const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
323const invokeArrayFns = (fns, arg) => {
324 for (let i = 0; i < fns.length; i++) {
325 fns[i](arg);
326 }
327};
328const def = (obj, key, value) => {
329 Object.defineProperty(obj, key, {
330 configurable: true,
331 enumerable: false,
332 value
333 });
334};
335/**
336 * "123-foo" will be parsed to 123
337 * This is used for the .number modifier in v-model
338 */
339const looseToNumber = (val) => {
340 const n = parseFloat(val);
341 return isNaN(n) ? val : n;
342};
343/**
344 * Only conerces number-like strings
345 * "123-foo" will be returned as-is
346 */
347const toNumber = (val) => {
348 const n = isString(val) ? Number(val) : NaN;
349 return isNaN(n) ? val : n;
350};
351let _globalThis;
352const getGlobalThis = () => {
353 return (_globalThis ||
354 (_globalThis =
355 typeof globalThis !== 'undefined'
356 ? globalThis
357 : typeof self !== 'undefined'
358 ? self
359 : typeof window !== 'undefined'
360 ? window
361 : typeof global !== 'undefined'
362 ? global
363 : {}));
364};
365
366function warn$1(msg, ...args) {
367 console.warn(`[Vue warn] ${msg}`, ...args);
368}
369
370let activeEffectScope;
371class EffectScope {
372 constructor(detached = false) {
373 this.detached = detached;
374 /**
375 * @internal
376 */
377 this._active = true;
378 /**
379 * @internal
380 */
381 this.effects = [];
382 /**
383 * @internal
384 */
385 this.cleanups = [];
386 this.parent = activeEffectScope;
387 if (!detached && activeEffectScope) {
388 this.index =
389 (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1;
390 }
391 }
392 get active() {
393 return this._active;
394 }
395 run(fn) {
396 if (this._active) {
397 const currentEffectScope = activeEffectScope;
398 try {
399 activeEffectScope = this;
400 return fn();
401 }
402 finally {
403 activeEffectScope = currentEffectScope;
404 }
405 }
406 else {
407 warn$1(`cannot run an inactive effect scope.`);
408 }
409 }
410 /**
411 * This should only be called on non-detached scopes
412 * @internal
413 */
414 on() {
415 activeEffectScope = this;
416 }
417 /**
418 * This should only be called on non-detached scopes
419 * @internal
420 */
421 off() {
422 activeEffectScope = this.parent;
423 }
424 stop(fromParent) {
425 if (this._active) {
426 let i, l;
427 for (i = 0, l = this.effects.length; i < l; i++) {
428 this.effects[i].stop();
429 }
430 for (i = 0, l = this.cleanups.length; i < l; i++) {
431 this.cleanups[i]();
432 }
433 if (this.scopes) {
434 for (i = 0, l = this.scopes.length; i < l; i++) {
435 this.scopes[i].stop(true);
436 }
437 }
438 // nested scope, dereference from parent to avoid memory leaks
439 if (!this.detached && this.parent && !fromParent) {
440 // optimized O(1) removal
441 const last = this.parent.scopes.pop();
442 if (last && last !== this) {
443 this.parent.scopes[this.index] = last;
444 last.index = this.index;
445 }
446 }
447 this.parent = undefined;
448 this._active = false;
449 }
450 }
451}
452function effectScope(detached) {
453 return new EffectScope(detached);
454}
455function recordEffectScope(effect, scope = activeEffectScope) {
456 if (scope && scope.active) {
457 scope.effects.push(effect);
458 }
459}
460function getCurrentScope() {
461 return activeEffectScope;
462}
463function onScopeDispose(fn) {
464 if (activeEffectScope) {
465 activeEffectScope.cleanups.push(fn);
466 }
467 else {
468 warn$1(`onScopeDispose() is called when there is no active effect scope` +
469 ` to be associated with.`);
470 }
471}
472
473const createDep = (effects) => {
474 const dep = new Set(effects);
475 dep.w = 0;
476 dep.n = 0;
477 return dep;
478};
479const wasTracked = (dep) => (dep.w & trackOpBit) > 0;
480const newTracked = (dep) => (dep.n & trackOpBit) > 0;
481const initDepMarkers = ({ deps }) => {
482 if (deps.length) {
483 for (let i = 0; i < deps.length; i++) {
484 deps[i].w |= trackOpBit; // set was tracked
485 }
486 }
487};
488const finalizeDepMarkers = (effect) => {
489 const { deps } = effect;
490 if (deps.length) {
491 let ptr = 0;
492 for (let i = 0; i < deps.length; i++) {
493 const dep = deps[i];
494 if (wasTracked(dep) && !newTracked(dep)) {
495 dep.delete(effect);
496 }
497 else {
498 deps[ptr++] = dep;
499 }
500 // clear bits
501 dep.w &= ~trackOpBit;
502 dep.n &= ~trackOpBit;
503 }
504 deps.length = ptr;
505 }
506};
507
508const targetMap = new WeakMap();
509// The number of effects currently being tracked recursively.
510let effectTrackDepth = 0;
511let trackOpBit = 1;
512/**
513 * The bitwise track markers support at most 30 levels of recursion.
514 * This value is chosen to enable modern JS engines to use a SMI on all platforms.
515 * When recursion depth is greater, fall back to using a full cleanup.
516 */
517const maxMarkerBits = 30;
518let activeEffect;
519const ITERATE_KEY = Symbol('iterate' );
520const MAP_KEY_ITERATE_KEY = Symbol('Map key iterate' );
521class ReactiveEffect {
522 constructor(fn, scheduler = null, scope) {
523 this.fn = fn;
524 this.scheduler = scheduler;
525 this.active = true;
526 this.deps = [];
527 this.parent = undefined;
528 recordEffectScope(this, scope);
529 }
530 run() {
531 if (!this.active) {
532 return this.fn();
533 }
534 let parent = activeEffect;
535 let lastShouldTrack = shouldTrack;
536 while (parent) {
537 if (parent === this) {
538 return;
539 }
540 parent = parent.parent;
541 }
542 try {
543 this.parent = activeEffect;
544 activeEffect = this;
545 shouldTrack = true;
546 trackOpBit = 1 << ++effectTrackDepth;
547 if (effectTrackDepth <= maxMarkerBits) {
548 initDepMarkers(this);
549 }
550 else {
551 cleanupEffect(this);
552 }
553 return this.fn();
554 }
555 finally {
556 if (effectTrackDepth <= maxMarkerBits) {
557 finalizeDepMarkers(this);
558 }
559 trackOpBit = 1 << --effectTrackDepth;
560 activeEffect = this.parent;
561 shouldTrack = lastShouldTrack;
562 this.parent = undefined;
563 if (this.deferStop) {
564 this.stop();
565 }
566 }
567 }
568 stop() {
569 // stopped while running itself - defer the cleanup
570 if (activeEffect === this) {
571 this.deferStop = true;
572 }
573 else if (this.active) {
574 cleanupEffect(this);
575 if (this.onStop) {
576 this.onStop();
577 }
578 this.active = false;
579 }
580 }
581}
582function cleanupEffect(effect) {
583 const { deps } = effect;
584 if (deps.length) {
585 for (let i = 0; i < deps.length; i++) {
586 deps[i].delete(effect);
587 }
588 deps.length = 0;
589 }
590}
591function effect(fn, options) {
592 if (fn.effect) {
593 fn = fn.effect.fn;
594 }
595 const _effect = new ReactiveEffect(fn);
596 if (options) {
597 extend(_effect, options);
598 if (options.scope)
599 recordEffectScope(_effect, options.scope);
600 }
601 if (!options || !options.lazy) {
602 _effect.run();
603 }
604 const runner = _effect.run.bind(_effect);
605 runner.effect = _effect;
606 return runner;
607}
608function stop(runner) {
609 runner.effect.stop();
610}
611let shouldTrack = true;
612const trackStack = [];
613function pauseTracking() {
614 trackStack.push(shouldTrack);
615 shouldTrack = false;
616}
617function resetTracking() {
618 const last = trackStack.pop();
619 shouldTrack = last === undefined ? true : last;
620}
621function track(target, type, key) {
622 if (shouldTrack && activeEffect) {
623 let depsMap = targetMap.get(target);
624 if (!depsMap) {
625 targetMap.set(target, (depsMap = new Map()));
626 }
627 let dep = depsMap.get(key);
628 if (!dep) {
629 depsMap.set(key, (dep = createDep()));
630 }
631 const eventInfo = { effect: activeEffect, target, type, key }
632 ;
633 trackEffects(dep, eventInfo);
634 }
635}
636function trackEffects(dep, debuggerEventExtraInfo) {
637 let shouldTrack = false;
638 if (effectTrackDepth <= maxMarkerBits) {
639 if (!newTracked(dep)) {
640 dep.n |= trackOpBit; // set newly tracked
641 shouldTrack = !wasTracked(dep);
642 }
643 }
644 else {
645 // Full cleanup mode.
646 shouldTrack = !dep.has(activeEffect);
647 }
648 if (shouldTrack) {
649 dep.add(activeEffect);
650 activeEffect.deps.push(dep);
651 if (activeEffect.onTrack) {
652 activeEffect.onTrack(Object.assign({ effect: activeEffect }, debuggerEventExtraInfo));
653 }
654 }
655}
656function trigger(target, type, key, newValue, oldValue, oldTarget) {
657 const depsMap = targetMap.get(target);
658 if (!depsMap) {
659 // never been tracked
660 return;
661 }
662 let deps = [];
663 if (type === "clear" /* TriggerOpTypes.CLEAR */) {
664 // collection being cleared
665 // trigger all effects for target
666 deps = [...depsMap.values()];
667 }
668 else if (key === 'length' && isArray(target)) {
669 const newLength = Number(newValue);
670 depsMap.forEach((dep, key) => {
671 if (key === 'length' || key >= newLength) {
672 deps.push(dep);
673 }
674 });
675 }
676 else {
677 // schedule runs for SET | ADD | DELETE
678 if (key !== void 0) {
679 deps.push(depsMap.get(key));
680 }
681 // also run for iteration key on ADD | DELETE | Map.SET
682 switch (type) {
683 case "add" /* TriggerOpTypes.ADD */:
684 if (!isArray(target)) {
685 deps.push(depsMap.get(ITERATE_KEY));
686 if (isMap(target)) {
687 deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
688 }
689 }
690 else if (isIntegerKey(key)) {
691 // new index added to array -> length changes
692 deps.push(depsMap.get('length'));
693 }
694 break;
695 case "delete" /* TriggerOpTypes.DELETE */:
696 if (!isArray(target)) {
697 deps.push(depsMap.get(ITERATE_KEY));
698 if (isMap(target)) {
699 deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
700 }
701 }
702 break;
703 case "set" /* TriggerOpTypes.SET */:
704 if (isMap(target)) {
705 deps.push(depsMap.get(ITERATE_KEY));
706 }
707 break;
708 }
709 }
710 const eventInfo = { target, type, key, newValue, oldValue, oldTarget }
711 ;
712 if (deps.length === 1) {
713 if (deps[0]) {
714 {
715 triggerEffects(deps[0], eventInfo);
716 }
717 }
718 }
719 else {
720 const effects = [];
721 for (const dep of deps) {
722 if (dep) {
723 effects.push(...dep);
724 }
725 }
726 {
727 triggerEffects(createDep(effects), eventInfo);
728 }
729 }
730}
731function triggerEffects(dep, debuggerEventExtraInfo) {
732 // spread into array for stabilization
733 const effects = isArray(dep) ? dep : [...dep];
734 for (const effect of effects) {
735 if (effect.computed) {
736 triggerEffect(effect, debuggerEventExtraInfo);
737 }
738 }
739 for (const effect of effects) {
740 if (!effect.computed) {
741 triggerEffect(effect, debuggerEventExtraInfo);
742 }
743 }
744}
745function triggerEffect(effect, debuggerEventExtraInfo) {
746 if (effect !== activeEffect || effect.allowRecurse) {
747 if (effect.onTrigger) {
748 effect.onTrigger(extend({ effect }, debuggerEventExtraInfo));
749 }
750 if (effect.scheduler) {
751 effect.scheduler();
752 }
753 else {
754 effect.run();
755 }
756 }
757}
758function getDepFromReactive(object, key) {
759 var _a;
760 return (_a = targetMap.get(object)) === null || _a === void 0 ? void 0 : _a.get(key);
761}
762
763const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`);
764const builtInSymbols = new Set(
765/*#__PURE__*/
766Object.getOwnPropertyNames(Symbol)
767 // ios10.x Object.getOwnPropertyNames(Symbol) can enumerate 'arguments' and 'caller'
768 // but accessing them on Symbol leads to TypeError because Symbol is a strict mode
769 // function
770 .filter(key => key !== 'arguments' && key !== 'caller')
771 .map(key => Symbol[key])
772 .filter(isSymbol));
773const get$1 = /*#__PURE__*/ createGetter();
774const shallowGet = /*#__PURE__*/ createGetter(false, true);
775const readonlyGet = /*#__PURE__*/ createGetter(true);
776const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true);
777const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations();
778function createArrayInstrumentations() {
779 const instrumentations = {};
780 ['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
781 instrumentations[key] = function (...args) {
782 const arr = toRaw(this);
783 for (let i = 0, l = this.length; i < l; i++) {
784 track(arr, "get" /* TrackOpTypes.GET */, i + '');
785 }
786 // we run the method using the original args first (which may be reactive)
787 const res = arr[key](...args);
788 if (res === -1 || res === false) {
789 // if that didn't work, run it again using raw values.
790 return arr[key](...args.map(toRaw));
791 }
792 else {
793 return res;
794 }
795 };
796 });
797 ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(key => {
798 instrumentations[key] = function (...args) {
799 pauseTracking();
800 const res = toRaw(this)[key].apply(this, args);
801 resetTracking();
802 return res;
803 };
804 });
805 return instrumentations;
806}
807function hasOwnProperty(key) {
808 const obj = toRaw(this);
809 track(obj, "has" /* TrackOpTypes.HAS */, key);
810 return obj.hasOwnProperty(key);
811}
812function createGetter(isReadonly = false, shallow = false) {
813 return function get(target, key, receiver) {
814 if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
815 return !isReadonly;
816 }
817 else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
818 return isReadonly;
819 }
820 else if (key === "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */) {
821 return shallow;
822 }
823 else if (key === "__v_raw" /* ReactiveFlags.RAW */ &&
824 receiver ===
825 (isReadonly
826 ? shallow
827 ? shallowReadonlyMap
828 : readonlyMap
829 : shallow
830 ? shallowReactiveMap
831 : reactiveMap).get(target)) {
832 return target;
833 }
834 const targetIsArray = isArray(target);
835 if (!isReadonly) {
836 if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
837 return Reflect.get(arrayInstrumentations, key, receiver);
838 }
839 if (key === 'hasOwnProperty') {
840 return hasOwnProperty;
841 }
842 }
843 const res = Reflect.get(target, key, receiver);
844 if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
845 return res;
846 }
847 if (!isReadonly) {
848 track(target, "get" /* TrackOpTypes.GET */, key);
849 }
850 if (shallow) {
851 return res;
852 }
853 if (isRef(res)) {
854 // ref unwrapping - skip unwrap for Array + integer key.
855 return targetIsArray && isIntegerKey(key) ? res : res.value;
856 }
857 if (isObject(res)) {
858 // Convert returned value into a proxy as well. we do the isObject check
859 // here to avoid invalid value warning. Also need to lazy access readonly
860 // and reactive here to avoid circular dependency.
861 return isReadonly ? readonly(res) : reactive(res);
862 }
863 return res;
864 };
865}
866const set$1 = /*#__PURE__*/ createSetter();
867const shallowSet = /*#__PURE__*/ createSetter(true);
868function createSetter(shallow = false) {
869 return function set(target, key, value, receiver) {
870 let oldValue = target[key];
871 if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
872 return false;
873 }
874 if (!shallow) {
875 if (!isShallow(value) && !isReadonly(value)) {
876 oldValue = toRaw(oldValue);
877 value = toRaw(value);
878 }
879 if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
880 oldValue.value = value;
881 return true;
882 }
883 }
884 const hadKey = isArray(target) && isIntegerKey(key)
885 ? Number(key) < target.length
886 : hasOwn(target, key);
887 const result = Reflect.set(target, key, value, receiver);
888 // don't trigger if target is something up in the prototype chain of original
889 if (target === toRaw(receiver)) {
890 if (!hadKey) {
891 trigger(target, "add" /* TriggerOpTypes.ADD */, key, value);
892 }
893 else if (hasChanged(value, oldValue)) {
894 trigger(target, "set" /* TriggerOpTypes.SET */, key, value, oldValue);
895 }
896 }
897 return result;
898 };
899}
900function deleteProperty(target, key) {
901 const hadKey = hasOwn(target, key);
902 const oldValue = target[key];
903 const result = Reflect.deleteProperty(target, key);
904 if (result && hadKey) {
905 trigger(target, "delete" /* TriggerOpTypes.DELETE */, key, undefined, oldValue);
906 }
907 return result;
908}
909function has$1(target, key) {
910 const result = Reflect.has(target, key);
911 if (!isSymbol(key) || !builtInSymbols.has(key)) {
912 track(target, "has" /* TrackOpTypes.HAS */, key);
913 }
914 return result;
915}
916function ownKeys(target) {
917 track(target, "iterate" /* TrackOpTypes.ITERATE */, isArray(target) ? 'length' : ITERATE_KEY);
918 return Reflect.ownKeys(target);
919}
920const mutableHandlers = {
921 get: get$1,
922 set: set$1,
923 deleteProperty,
924 has: has$1,
925 ownKeys
926};
927const readonlyHandlers = {
928 get: readonlyGet,
929 set(target, key) {
930 {
931 warn$1(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
932 }
933 return true;
934 },
935 deleteProperty(target, key) {
936 {
937 warn$1(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
938 }
939 return true;
940 }
941};
942const shallowReactiveHandlers = /*#__PURE__*/ extend({}, mutableHandlers, {
943 get: shallowGet,
944 set: shallowSet
945});
946// Props handlers are special in the sense that it should not unwrap top-level
947// refs (in order to allow refs to be explicitly passed down), but should
948// retain the reactivity of the normal readonly object.
949const shallowReadonlyHandlers = /*#__PURE__*/ extend({}, readonlyHandlers, {
950 get: shallowReadonlyGet
951});
952
953const toShallow = (value) => value;
954const getProto = (v) => Reflect.getPrototypeOf(v);
955function get(target, key, isReadonly = false, isShallow = false) {
956 // #1772: readonly(reactive(Map)) should return readonly + reactive version
957 // of the value
958 target = target["__v_raw" /* ReactiveFlags.RAW */];
959 const rawTarget = toRaw(target);
960 const rawKey = toRaw(key);
961 if (!isReadonly) {
962 if (key !== rawKey) {
963 track(rawTarget, "get" /* TrackOpTypes.GET */, key);
964 }
965 track(rawTarget, "get" /* TrackOpTypes.GET */, rawKey);
966 }
967 const { has } = getProto(rawTarget);
968 const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
969 if (has.call(rawTarget, key)) {
970 return wrap(target.get(key));
971 }
972 else if (has.call(rawTarget, rawKey)) {
973 return wrap(target.get(rawKey));
974 }
975 else if (target !== rawTarget) {
976 // #3602 readonly(reactive(Map))
977 // ensure that the nested reactive `Map` can do tracking for itself
978 target.get(key);
979 }
980}
981function has(key, isReadonly = false) {
982 const target = this["__v_raw" /* ReactiveFlags.RAW */];
983 const rawTarget = toRaw(target);
984 const rawKey = toRaw(key);
985 if (!isReadonly) {
986 if (key !== rawKey) {
987 track(rawTarget, "has" /* TrackOpTypes.HAS */, key);
988 }
989 track(rawTarget, "has" /* TrackOpTypes.HAS */, rawKey);
990 }
991 return key === rawKey
992 ? target.has(key)
993 : target.has(key) || target.has(rawKey);
994}
995function size(target, isReadonly = false) {
996 target = target["__v_raw" /* ReactiveFlags.RAW */];
997 !isReadonly && track(toRaw(target), "iterate" /* TrackOpTypes.ITERATE */, ITERATE_KEY);
998 return Reflect.get(target, 'size', target);
999}
1000function add(value) {
1001 value = toRaw(value);
1002 const target = toRaw(this);
1003 const proto = getProto(target);
1004 const hadKey = proto.has.call(target, value);
1005 if (!hadKey) {
1006 target.add(value);
1007 trigger(target, "add" /* TriggerOpTypes.ADD */, value, value);
1008 }
1009 return this;
1010}
1011function set(key, value) {
1012 value = toRaw(value);
1013 const target = toRaw(this);
1014 const { has, get } = getProto(target);
1015 let hadKey = has.call(target, key);
1016 if (!hadKey) {
1017 key = toRaw(key);
1018 hadKey = has.call(target, key);
1019 }
1020 else {
1021 checkIdentityKeys(target, has, key);
1022 }
1023 const oldValue = get.call(target, key);
1024 target.set(key, value);
1025 if (!hadKey) {
1026 trigger(target, "add" /* TriggerOpTypes.ADD */, key, value);
1027 }
1028 else if (hasChanged(value, oldValue)) {
1029 trigger(target, "set" /* TriggerOpTypes.SET */, key, value, oldValue);
1030 }
1031 return this;
1032}
1033function deleteEntry(key) {
1034 const target = toRaw(this);
1035 const { has, get } = getProto(target);
1036 let hadKey = has.call(target, key);
1037 if (!hadKey) {
1038 key = toRaw(key);
1039 hadKey = has.call(target, key);
1040 }
1041 else {
1042 checkIdentityKeys(target, has, key);
1043 }
1044 const oldValue = get ? get.call(target, key) : undefined;
1045 // forward the operation before queueing reactions
1046 const result = target.delete(key);
1047 if (hadKey) {
1048 trigger(target, "delete" /* TriggerOpTypes.DELETE */, key, undefined, oldValue);
1049 }
1050 return result;
1051}
1052function clear() {
1053 const target = toRaw(this);
1054 const hadItems = target.size !== 0;
1055 const oldTarget = isMap(target)
1056 ? new Map(target)
1057 : new Set(target)
1058 ;
1059 // forward the operation before queueing reactions
1060 const result = target.clear();
1061 if (hadItems) {
1062 trigger(target, "clear" /* TriggerOpTypes.CLEAR */, undefined, undefined, oldTarget);
1063 }
1064 return result;
1065}
1066function createForEach(isReadonly, isShallow) {
1067 return function forEach(callback, thisArg) {
1068 const observed = this;
1069 const target = observed["__v_raw" /* ReactiveFlags.RAW */];
1070 const rawTarget = toRaw(target);
1071 const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
1072 !isReadonly && track(rawTarget, "iterate" /* TrackOpTypes.ITERATE */, ITERATE_KEY);
1073 return target.forEach((value, key) => {
1074 // important: make sure the callback is
1075 // 1. invoked with the reactive map as `this` and 3rd arg
1076 // 2. the value received should be a corresponding reactive/readonly.
1077 return callback.call(thisArg, wrap(value), wrap(key), observed);
1078 });
1079 };
1080}
1081function createIterableMethod(method, isReadonly, isShallow) {
1082 return function (...args) {
1083 const target = this["__v_raw" /* ReactiveFlags.RAW */];
1084 const rawTarget = toRaw(target);
1085 const targetIsMap = isMap(rawTarget);
1086 const isPair = method === 'entries' || (method === Symbol.iterator && targetIsMap);
1087 const isKeyOnly = method === 'keys' && targetIsMap;
1088 const innerIterator = target[method](...args);
1089 const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
1090 !isReadonly &&
1091 track(rawTarget, "iterate" /* TrackOpTypes.ITERATE */, isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY);
1092 // return a wrapped iterator which returns observed versions of the
1093 // values emitted from the real iterator
1094 return {
1095 // iterator protocol
1096 next() {
1097 const { value, done } = innerIterator.next();
1098 return done
1099 ? { value, done }
1100 : {
1101 value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
1102 done
1103 };
1104 },
1105 // iterable protocol
1106 [Symbol.iterator]() {
1107 return this;
1108 }
1109 };
1110 };
1111}
1112function createReadonlyMethod(type) {
1113 return function (...args) {
1114 {
1115 const key = args[0] ? `on key "${args[0]}" ` : ``;
1116 console.warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, toRaw(this));
1117 }
1118 return type === "delete" /* TriggerOpTypes.DELETE */ ? false : this;
1119 };
1120}
1121function createInstrumentations() {
1122 const mutableInstrumentations = {
1123 get(key) {
1124 return get(this, key);
1125 },
1126 get size() {
1127 return size(this);
1128 },
1129 has,
1130 add,
1131 set,
1132 delete: deleteEntry,
1133 clear,
1134 forEach: createForEach(false, false)
1135 };
1136 const shallowInstrumentations = {
1137 get(key) {
1138 return get(this, key, false, true);
1139 },
1140 get size() {
1141 return size(this);
1142 },
1143 has,
1144 add,
1145 set,
1146 delete: deleteEntry,
1147 clear,
1148 forEach: createForEach(false, true)
1149 };
1150 const readonlyInstrumentations = {
1151 get(key) {
1152 return get(this, key, true);
1153 },
1154 get size() {
1155 return size(this, true);
1156 },
1157 has(key) {
1158 return has.call(this, key, true);
1159 },
1160 add: createReadonlyMethod("add" /* TriggerOpTypes.ADD */),
1161 set: createReadonlyMethod("set" /* TriggerOpTypes.SET */),
1162 delete: createReadonlyMethod("delete" /* TriggerOpTypes.DELETE */),
1163 clear: createReadonlyMethod("clear" /* TriggerOpTypes.CLEAR */),
1164 forEach: createForEach(true, false)
1165 };
1166 const shallowReadonlyInstrumentations = {
1167 get(key) {
1168 return get(this, key, true, true);
1169 },
1170 get size() {
1171 return size(this, true);
1172 },
1173 has(key) {
1174 return has.call(this, key, true);
1175 },
1176 add: createReadonlyMethod("add" /* TriggerOpTypes.ADD */),
1177 set: createReadonlyMethod("set" /* TriggerOpTypes.SET */),
1178 delete: createReadonlyMethod("delete" /* TriggerOpTypes.DELETE */),
1179 clear: createReadonlyMethod("clear" /* TriggerOpTypes.CLEAR */),
1180 forEach: createForEach(true, true)
1181 };
1182 const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator];
1183 iteratorMethods.forEach(method => {
1184 mutableInstrumentations[method] = createIterableMethod(method, false, false);
1185 readonlyInstrumentations[method] = createIterableMethod(method, true, false);
1186 shallowInstrumentations[method] = createIterableMethod(method, false, true);
1187 shallowReadonlyInstrumentations[method] = createIterableMethod(method, true, true);
1188 });
1189 return [
1190 mutableInstrumentations,
1191 readonlyInstrumentations,
1192 shallowInstrumentations,
1193 shallowReadonlyInstrumentations
1194 ];
1195}
1196const [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* #__PURE__*/ createInstrumentations();
1197function createInstrumentationGetter(isReadonly, shallow) {
1198 const instrumentations = shallow
1199 ? isReadonly
1200 ? shallowReadonlyInstrumentations
1201 : shallowInstrumentations
1202 : isReadonly
1203 ? readonlyInstrumentations
1204 : mutableInstrumentations;
1205 return (target, key, receiver) => {
1206 if (key === "__v_isReactive" /* ReactiveFlags.IS_REACTIVE */) {
1207 return !isReadonly;
1208 }
1209 else if (key === "__v_isReadonly" /* ReactiveFlags.IS_READONLY */) {
1210 return isReadonly;
1211 }
1212 else if (key === "__v_raw" /* ReactiveFlags.RAW */) {
1213 return target;
1214 }
1215 return Reflect.get(hasOwn(instrumentations, key) && key in target
1216 ? instrumentations
1217 : target, key, receiver);
1218 };
1219}
1220const mutableCollectionHandlers = {
1221 get: /*#__PURE__*/ createInstrumentationGetter(false, false)
1222};
1223const shallowCollectionHandlers = {
1224 get: /*#__PURE__*/ createInstrumentationGetter(false, true)
1225};
1226const readonlyCollectionHandlers = {
1227 get: /*#__PURE__*/ createInstrumentationGetter(true, false)
1228};
1229const shallowReadonlyCollectionHandlers = {
1230 get: /*#__PURE__*/ createInstrumentationGetter(true, true)
1231};
1232function checkIdentityKeys(target, has, key) {
1233 const rawKey = toRaw(key);
1234 if (rawKey !== key && has.call(target, rawKey)) {
1235 const type = toRawType(target);
1236 console.warn(`Reactive ${type} contains both the raw and reactive ` +
1237 `versions of the same object${type === `Map` ? ` as keys` : ``}, ` +
1238 `which can lead to inconsistencies. ` +
1239 `Avoid differentiating between the raw and reactive versions ` +
1240 `of an object and only use the reactive version if possible.`);
1241 }
1242}
1243
1244const reactiveMap = new WeakMap();
1245const shallowReactiveMap = new WeakMap();
1246const readonlyMap = new WeakMap();
1247const shallowReadonlyMap = new WeakMap();
1248function targetTypeMap(rawType) {
1249 switch (rawType) {
1250 case 'Object':
1251 case 'Array':
1252 return 1 /* TargetType.COMMON */;
1253 case 'Map':
1254 case 'Set':
1255 case 'WeakMap':
1256 case 'WeakSet':
1257 return 2 /* TargetType.COLLECTION */;
1258 default:
1259 return 0 /* TargetType.INVALID */;
1260 }
1261}
1262function getTargetType(value) {
1263 return value["__v_skip" /* ReactiveFlags.SKIP */] || !Object.isExtensible(value)
1264 ? 0 /* TargetType.INVALID */
1265 : targetTypeMap(toRawType(value));
1266}
1267function reactive(target) {
1268 // if trying to observe a readonly proxy, return the readonly version.
1269 if (isReadonly(target)) {
1270 return target;
1271 }
1272 return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
1273}
1274/**
1275 * Return a shallowly-reactive copy of the original object, where only the root
1276 * level properties are reactive. It also does not auto-unwrap refs (even at the
1277 * root level).
1278 */
1279function shallowReactive(target) {
1280 return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap);
1281}
1282/**
1283 * Creates a readonly copy of the original object. Note the returned copy is not
1284 * made reactive, but `readonly` can be called on an already reactive object.
1285 */
1286function readonly(target) {
1287 return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
1288}
1289/**
1290 * Returns a reactive-copy of the original object, where only the root level
1291 * properties are readonly, and does NOT unwrap refs nor recursively convert
1292 * returned properties.
1293 * This is used for creating the props proxy object for stateful components.
1294 */
1295function shallowReadonly(target) {
1296 return createReactiveObject(target, true, shallowReadonlyHandlers, shallowReadonlyCollectionHandlers, shallowReadonlyMap);
1297}
1298function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
1299 if (!isObject(target)) {
1300 {
1301 console.warn(`value cannot be made reactive: ${String(target)}`);
1302 }
1303 return target;
1304 }
1305 // target is already a Proxy, return it.
1306 // exception: calling readonly() on a reactive object
1307 if (target["__v_raw" /* ReactiveFlags.RAW */] &&
1308 !(isReadonly && target["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */])) {
1309 return target;
1310 }
1311 // target already has corresponding Proxy
1312 const existingProxy = proxyMap.get(target);
1313 if (existingProxy) {
1314 return existingProxy;
1315 }
1316 // only specific value types can be observed.
1317 const targetType = getTargetType(target);
1318 if (targetType === 0 /* TargetType.INVALID */) {
1319 return target;
1320 }
1321 const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers);
1322 proxyMap.set(target, proxy);
1323 return proxy;
1324}
1325function isReactive(value) {
1326 if (isReadonly(value)) {
1327 return isReactive(value["__v_raw" /* ReactiveFlags.RAW */]);
1328 }
1329 return !!(value && value["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */]);
1330}
1331function isReadonly(value) {
1332 return !!(value && value["__v_isReadonly" /* ReactiveFlags.IS_READONLY */]);
1333}
1334function isShallow(value) {
1335 return !!(value && value["__v_isShallow" /* ReactiveFlags.IS_SHALLOW */]);
1336}
1337function isProxy(value) {
1338 return isReactive(value) || isReadonly(value);
1339}
1340function toRaw(observed) {
1341 const raw = observed && observed["__v_raw" /* ReactiveFlags.RAW */];
1342 return raw ? toRaw(raw) : observed;
1343}
1344function markRaw(value) {
1345 def(value, "__v_skip" /* ReactiveFlags.SKIP */, true);
1346 return value;
1347}
1348const toReactive = (value) => isObject(value) ? reactive(value) : value;
1349const toReadonly = (value) => isObject(value) ? readonly(value) : value;
1350
1351function trackRefValue(ref) {
1352 if (shouldTrack && activeEffect) {
1353 ref = toRaw(ref);
1354 {
1355 trackEffects(ref.dep || (ref.dep = createDep()), {
1356 target: ref,
1357 type: "get" /* TrackOpTypes.GET */,
1358 key: 'value'
1359 });
1360 }
1361 }
1362}
1363function triggerRefValue(ref, newVal) {
1364 ref = toRaw(ref);
1365 const dep = ref.dep;
1366 if (dep) {
1367 {
1368 triggerEffects(dep, {
1369 target: ref,
1370 type: "set" /* TriggerOpTypes.SET */,
1371 key: 'value',
1372 newValue: newVal
1373 });
1374 }
1375 }
1376}
1377function isRef(r) {
1378 return !!(r && r.__v_isRef === true);
1379}
1380function ref(value) {
1381 return createRef(value, false);
1382}
1383function shallowRef(value) {
1384 return createRef(value, true);
1385}
1386function createRef(rawValue, shallow) {
1387 if (isRef(rawValue)) {
1388 return rawValue;
1389 }
1390 return new RefImpl(rawValue, shallow);
1391}
1392class RefImpl {
1393 constructor(value, __v_isShallow) {
1394 this.__v_isShallow = __v_isShallow;
1395 this.dep = undefined;
1396 this.__v_isRef = true;
1397 this._rawValue = __v_isShallow ? value : toRaw(value);
1398 this._value = __v_isShallow ? value : toReactive(value);
1399 }
1400 get value() {
1401 trackRefValue(this);
1402 return this._value;
1403 }
1404 set value(newVal) {
1405 const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
1406 newVal = useDirectValue ? newVal : toRaw(newVal);
1407 if (hasChanged(newVal, this._rawValue)) {
1408 this._rawValue = newVal;
1409 this._value = useDirectValue ? newVal : toReactive(newVal);
1410 triggerRefValue(this, newVal);
1411 }
1412 }
1413}
1414function triggerRef(ref) {
1415 triggerRefValue(ref, ref.value );
1416}
1417function unref(ref) {
1418 return isRef(ref) ? ref.value : ref;
1419}
1420const shallowUnwrapHandlers = {
1421 get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
1422 set: (target, key, value, receiver) => {
1423 const oldValue = target[key];
1424 if (isRef(oldValue) && !isRef(value)) {
1425 oldValue.value = value;
1426 return true;
1427 }
1428 else {
1429 return Reflect.set(target, key, value, receiver);
1430 }
1431 }
1432};
1433function proxyRefs(objectWithRefs) {
1434 return isReactive(objectWithRefs)
1435 ? objectWithRefs
1436 : new Proxy(objectWithRefs, shallowUnwrapHandlers);
1437}
1438class CustomRefImpl {
1439 constructor(factory) {
1440 this.dep = undefined;
1441 this.__v_isRef = true;
1442 const { get, set } = factory(() => trackRefValue(this), () => triggerRefValue(this));
1443 this._get = get;
1444 this._set = set;
1445 }
1446 get value() {
1447 return this._get();
1448 }
1449 set value(newVal) {
1450 this._set(newVal);
1451 }
1452}
1453function customRef(factory) {
1454 return new CustomRefImpl(factory);
1455}
1456function toRefs(object) {
1457 if (!isProxy(object)) {
1458 console.warn(`toRefs() expects a reactive object but received a plain one.`);
1459 }
1460 const ret = isArray(object) ? new Array(object.length) : {};
1461 for (const key in object) {
1462 ret[key] = toRef(object, key);
1463 }
1464 return ret;
1465}
1466class ObjectRefImpl {
1467 constructor(_object, _key, _defaultValue) {
1468 this._object = _object;
1469 this._key = _key;
1470 this._defaultValue = _defaultValue;
1471 this.__v_isRef = true;
1472 }
1473 get value() {
1474 const val = this._object[this._key];
1475 return val === undefined ? this._defaultValue : val;
1476 }
1477 set value(newVal) {
1478 this._object[this._key] = newVal;
1479 }
1480 get dep() {
1481 return getDepFromReactive(toRaw(this._object), this._key);
1482 }
1483}
1484function toRef(object, key, defaultValue) {
1485 const val = object[key];
1486 return isRef(val)
1487 ? val
1488 : new ObjectRefImpl(object, key, defaultValue);
1489}
1490
1491var _a;
1492class ComputedRefImpl {
1493 constructor(getter, _setter, isReadonly, isSSR) {
1494 this._setter = _setter;
1495 this.dep = undefined;
1496 this.__v_isRef = true;
1497 this[_a] = false;
1498 this._dirty = true;
1499 this.effect = new ReactiveEffect(getter, () => {
1500 if (!this._dirty) {
1501 this._dirty = true;
1502 triggerRefValue(this);
1503 }
1504 });
1505 this.effect.computed = this;
1506 this.effect.active = this._cacheable = !isSSR;
1507 this["__v_isReadonly" /* ReactiveFlags.IS_READONLY */] = isReadonly;
1508 }
1509 get value() {
1510 // the computed ref may get wrapped by other proxies e.g. readonly() #3376
1511 const self = toRaw(this);
1512 trackRefValue(self);
1513 if (self._dirty || !self._cacheable) {
1514 self._dirty = false;
1515 self._value = self.effect.run();
1516 }
1517 return self._value;
1518 }
1519 set value(newValue) {
1520 this._setter(newValue);
1521 }
1522}
1523_a = "__v_isReadonly" /* ReactiveFlags.IS_READONLY */;
1524function computed$1(getterOrOptions, debugOptions, isSSR = false) {
1525 let getter;
1526 let setter;
1527 const onlyGetter = isFunction(getterOrOptions);
1528 if (onlyGetter) {
1529 getter = getterOrOptions;
1530 setter = () => {
1531 console.warn('Write operation failed: computed value is readonly');
1532 }
1533 ;
1534 }
1535 else {
1536 getter = getterOrOptions.get;
1537 setter = getterOrOptions.set;
1538 }
1539 const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
1540 if (debugOptions && !isSSR) {
1541 cRef.effect.onTrack = debugOptions.onTrack;
1542 cRef.effect.onTrigger = debugOptions.onTrigger;
1543 }
1544 return cRef;
1545}
1546
1547const stack = [];
1548function pushWarningContext(vnode) {
1549 stack.push(vnode);
1550}
1551function popWarningContext() {
1552 stack.pop();
1553}
1554function warn(msg, ...args) {
1555 // avoid props formatting or warn handler tracking deps that might be mutated
1556 // during patch, leading to infinite recursion.
1557 pauseTracking();
1558 const instance = stack.length ? stack[stack.length - 1].component : null;
1559 const appWarnHandler = instance && instance.appContext.config.warnHandler;
1560 const trace = getComponentTrace();
1561 if (appWarnHandler) {
1562 callWithErrorHandling(appWarnHandler, instance, 11 /* ErrorCodes.APP_WARN_HANDLER */, [
1563 msg + args.join(''),
1564 instance && instance.proxy,
1565 trace
1566 .map(({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`)
1567 .join('\n'),
1568 trace
1569 ]);
1570 }
1571 else {
1572 const warnArgs = [`[Vue warn]: ${msg}`, ...args];
1573 /* istanbul ignore if */
1574 if (trace.length &&
1575 // avoid spamming console during tests
1576 !false) {
1577 warnArgs.push(`\n`, ...formatTrace(trace));
1578 }
1579 console.warn(...warnArgs);
1580 }
1581 resetTracking();
1582}
1583function getComponentTrace() {
1584 let currentVNode = stack[stack.length - 1];
1585 if (!currentVNode) {
1586 return [];
1587 }
1588 // we can't just use the stack because it will be incomplete during updates
1589 // that did not start from the root. Re-construct the parent chain using
1590 // instance parent pointers.
1591 const normalizedStack = [];
1592 while (currentVNode) {
1593 const last = normalizedStack[0];
1594 if (last && last.vnode === currentVNode) {
1595 last.recurseCount++;
1596 }
1597 else {
1598 normalizedStack.push({
1599 vnode: currentVNode,
1600 recurseCount: 0
1601 });
1602 }
1603 const parentInstance = currentVNode.component && currentVNode.component.parent;
1604 currentVNode = parentInstance && parentInstance.vnode;
1605 }
1606 return normalizedStack;
1607}
1608/* istanbul ignore next */
1609function formatTrace(trace) {
1610 const logs = [];
1611 trace.forEach((entry, i) => {
1612 logs.push(...(i === 0 ? [] : [`\n`]), ...formatTraceEntry(entry));
1613 });
1614 return logs;
1615}
1616function formatTraceEntry({ vnode, recurseCount }) {
1617 const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
1618 const isRoot = vnode.component ? vnode.component.parent == null : false;
1619 const open = ` at <${formatComponentName(vnode.component, vnode.type, isRoot)}`;
1620 const close = `>` + postfix;
1621 return vnode.props
1622 ? [open, ...formatProps(vnode.props), close]
1623 : [open + close];
1624}
1625/* istanbul ignore next */
1626function formatProps(props) {
1627 const res = [];
1628 const keys = Object.keys(props);
1629 keys.slice(0, 3).forEach(key => {
1630 res.push(...formatProp(key, props[key]));
1631 });
1632 if (keys.length > 3) {
1633 res.push(` ...`);
1634 }
1635 return res;
1636}
1637/* istanbul ignore next */
1638function formatProp(key, value, raw) {
1639 if (isString(value)) {
1640 value = JSON.stringify(value);
1641 return raw ? value : [`${key}=${value}`];
1642 }
1643 else if (typeof value === 'number' ||
1644 typeof value === 'boolean' ||
1645 value == null) {
1646 return raw ? value : [`${key}=${value}`];
1647 }
1648 else if (isRef(value)) {
1649 value = formatProp(key, toRaw(value.value), true);
1650 return raw ? value : [`${key}=Ref<`, value, `>`];
1651 }
1652 else if (isFunction(value)) {
1653 return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];
1654 }
1655 else {
1656 value = toRaw(value);
1657 return raw ? value : [`${key}=`, value];
1658 }
1659}
1660/**
1661 * @internal
1662 */
1663function assertNumber(val, type) {
1664 if (val === undefined) {
1665 return;
1666 }
1667 else if (typeof val !== 'number') {
1668 warn(`${type} is not a valid number - ` + `got ${JSON.stringify(val)}.`);
1669 }
1670 else if (isNaN(val)) {
1671 warn(`${type} is NaN - ` + 'the duration expression might be incorrect.');
1672 }
1673}
1674
1675const ErrorTypeStrings = {
1676 ["sp" /* LifecycleHooks.SERVER_PREFETCH */]: 'serverPrefetch hook',
1677 ["bc" /* LifecycleHooks.BEFORE_CREATE */]: 'beforeCreate hook',
1678 ["c" /* LifecycleHooks.CREATED */]: 'created hook',
1679 ["bm" /* LifecycleHooks.BEFORE_MOUNT */]: 'beforeMount hook',
1680 ["m" /* LifecycleHooks.MOUNTED */]: 'mounted hook',
1681 ["bu" /* LifecycleHooks.BEFORE_UPDATE */]: 'beforeUpdate hook',
1682 ["u" /* LifecycleHooks.UPDATED */]: 'updated',
1683 ["bum" /* LifecycleHooks.BEFORE_UNMOUNT */]: 'beforeUnmount hook',
1684 ["um" /* LifecycleHooks.UNMOUNTED */]: 'unmounted hook',
1685 ["a" /* LifecycleHooks.ACTIVATED */]: 'activated hook',
1686 ["da" /* LifecycleHooks.DEACTIVATED */]: 'deactivated hook',
1687 ["ec" /* LifecycleHooks.ERROR_CAPTURED */]: 'errorCaptured hook',
1688 ["rtc" /* LifecycleHooks.RENDER_TRACKED */]: 'renderTracked hook',
1689 ["rtg" /* LifecycleHooks.RENDER_TRIGGERED */]: 'renderTriggered hook',
1690 [0 /* ErrorCodes.SETUP_FUNCTION */]: 'setup function',
1691 [1 /* ErrorCodes.RENDER_FUNCTION */]: 'render function',
1692 [2 /* ErrorCodes.WATCH_GETTER */]: 'watcher getter',
1693 [3 /* ErrorCodes.WATCH_CALLBACK */]: 'watcher callback',
1694 [4 /* ErrorCodes.WATCH_CLEANUP */]: 'watcher cleanup function',
1695 [5 /* ErrorCodes.NATIVE_EVENT_HANDLER */]: 'native event handler',
1696 [6 /* ErrorCodes.COMPONENT_EVENT_HANDLER */]: 'component event handler',
1697 [7 /* ErrorCodes.VNODE_HOOK */]: 'vnode hook',
1698 [8 /* ErrorCodes.DIRECTIVE_HOOK */]: 'directive hook',
1699 [9 /* ErrorCodes.TRANSITION_HOOK */]: 'transition hook',
1700 [10 /* ErrorCodes.APP_ERROR_HANDLER */]: 'app errorHandler',
1701 [11 /* ErrorCodes.APP_WARN_HANDLER */]: 'app warnHandler',
1702 [12 /* ErrorCodes.FUNCTION_REF */]: 'ref function',
1703 [13 /* ErrorCodes.ASYNC_COMPONENT_LOADER */]: 'async component loader',
1704 [14 /* ErrorCodes.SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +
1705 'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core'
1706};
1707function callWithErrorHandling(fn, instance, type, args) {
1708 let res;
1709 try {
1710 res = args ? fn(...args) : fn();
1711 }
1712 catch (err) {
1713 handleError(err, instance, type);
1714 }
1715 return res;
1716}
1717function callWithAsyncErrorHandling(fn, instance, type, args) {
1718 if (isFunction(fn)) {
1719 const res = callWithErrorHandling(fn, instance, type, args);
1720 if (res && isPromise(res)) {
1721 res.catch(err => {
1722 handleError(err, instance, type);
1723 });
1724 }
1725 return res;
1726 }
1727 const values = [];
1728 for (let i = 0; i < fn.length; i++) {
1729 values.push(callWithAsyncErrorHandling(fn[i], instance, type, args));
1730 }
1731 return values;
1732}
1733function handleError(err, instance, type, throwInDev = true) {
1734 const contextVNode = instance ? instance.vnode : null;
1735 if (instance) {
1736 let cur = instance.parent;
1737 // the exposed instance is the render proxy to keep it consistent with 2.x
1738 const exposedInstance = instance.proxy;
1739 // in production the hook receives only the error code
1740 const errorInfo = ErrorTypeStrings[type] ;
1741 while (cur) {
1742 const errorCapturedHooks = cur.ec;
1743 if (errorCapturedHooks) {
1744 for (let i = 0; i < errorCapturedHooks.length; i++) {
1745 if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {
1746 return;
1747 }
1748 }
1749 }
1750 cur = cur.parent;
1751 }
1752 // app-level handling
1753 const appErrorHandler = instance.appContext.config.errorHandler;
1754 if (appErrorHandler) {
1755 callWithErrorHandling(appErrorHandler, null, 10 /* ErrorCodes.APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]);
1756 return;
1757 }
1758 }
1759 logError(err, type, contextVNode, throwInDev);
1760}
1761function logError(err, type, contextVNode, throwInDev = true) {
1762 {
1763 const info = ErrorTypeStrings[type];
1764 if (contextVNode) {
1765 pushWarningContext(contextVNode);
1766 }
1767 warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
1768 if (contextVNode) {
1769 popWarningContext();
1770 }
1771 // crash in dev by default so it's more noticeable
1772 if (throwInDev) {
1773 throw err;
1774 }
1775 else {
1776 console.error(err);
1777 }
1778 }
1779}
1780
1781let isFlushing = false;
1782let isFlushPending = false;
1783const queue = [];
1784let flushIndex = 0;
1785const pendingPostFlushCbs = [];
1786let activePostFlushCbs = null;
1787let postFlushIndex = 0;
1788const resolvedPromise = /*#__PURE__*/ Promise.resolve();
1789let currentFlushPromise = null;
1790const RECURSION_LIMIT = 100;
1791function nextTick(fn) {
1792 const p = currentFlushPromise || resolvedPromise;
1793 return fn ? p.then(this ? fn.bind(this) : fn) : p;
1794}
1795// #2768
1796// Use binary-search to find a suitable position in the queue,
1797// so that the queue maintains the increasing order of job's id,
1798// which can prevent the job from being skipped and also can avoid repeated patching.
1799function findInsertionIndex(id) {
1800 // the start index should be `flushIndex + 1`
1801 let start = flushIndex + 1;
1802 let end = queue.length;
1803 while (start < end) {
1804 const middle = (start + end) >>> 1;
1805 const middleJobId = getId(queue[middle]);
1806 middleJobId < id ? (start = middle + 1) : (end = middle);
1807 }
1808 return start;
1809}
1810function queueJob(job) {
1811 // the dedupe search uses the startIndex argument of Array.includes()
1812 // by default the search index includes the current job that is being run
1813 // so it cannot recursively trigger itself again.
1814 // if the job is a watch() callback, the search will start with a +1 index to
1815 // allow it recursively trigger itself - it is the user's responsibility to
1816 // ensure it doesn't end up in an infinite loop.
1817 if (!queue.length ||
1818 !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) {
1819 if (job.id == null) {
1820 queue.push(job);
1821 }
1822 else {
1823 queue.splice(findInsertionIndex(job.id), 0, job);
1824 }
1825 queueFlush();
1826 }
1827}
1828function queueFlush() {
1829 if (!isFlushing && !isFlushPending) {
1830 isFlushPending = true;
1831 currentFlushPromise = resolvedPromise.then(flushJobs);
1832 }
1833}
1834function invalidateJob(job) {
1835 const i = queue.indexOf(job);
1836 if (i > flushIndex) {
1837 queue.splice(i, 1);
1838 }
1839}
1840function queuePostFlushCb(cb) {
1841 if (!isArray(cb)) {
1842 if (!activePostFlushCbs ||
1843 !activePostFlushCbs.includes(cb, cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex)) {
1844 pendingPostFlushCbs.push(cb);
1845 }
1846 }
1847 else {
1848 // if cb is an array, it is a component lifecycle hook which can only be
1849 // triggered by a job, which is already deduped in the main queue, so
1850 // we can skip duplicate check here to improve perf
1851 pendingPostFlushCbs.push(...cb);
1852 }
1853 queueFlush();
1854}
1855function flushPreFlushCbs(seen,
1856// if currently flushing, skip the current job itself
1857i = isFlushing ? flushIndex + 1 : 0) {
1858 {
1859 seen = seen || new Map();
1860 }
1861 for (; i < queue.length; i++) {
1862 const cb = queue[i];
1863 if (cb && cb.pre) {
1864 if (checkRecursiveUpdates(seen, cb)) {
1865 continue;
1866 }
1867 queue.splice(i, 1);
1868 i--;
1869 cb();
1870 }
1871 }
1872}
1873function flushPostFlushCbs(seen) {
1874 if (pendingPostFlushCbs.length) {
1875 const deduped = [...new Set(pendingPostFlushCbs)];
1876 pendingPostFlushCbs.length = 0;
1877 // #1947 already has active queue, nested flushPostFlushCbs call
1878 if (activePostFlushCbs) {
1879 activePostFlushCbs.push(...deduped);
1880 return;
1881 }
1882 activePostFlushCbs = deduped;
1883 {
1884 seen = seen || new Map();
1885 }
1886 activePostFlushCbs.sort((a, b) => getId(a) - getId(b));
1887 for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
1888 if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) {
1889 continue;
1890 }
1891 activePostFlushCbs[postFlushIndex]();
1892 }
1893 activePostFlushCbs = null;
1894 postFlushIndex = 0;
1895 }
1896}
1897const getId = (job) => job.id == null ? Infinity : job.id;
1898const comparator = (a, b) => {
1899 const diff = getId(a) - getId(b);
1900 if (diff === 0) {
1901 if (a.pre && !b.pre)
1902 return -1;
1903 if (b.pre && !a.pre)
1904 return 1;
1905 }
1906 return diff;
1907};
1908function flushJobs(seen) {
1909 isFlushPending = false;
1910 isFlushing = true;
1911 {
1912 seen = seen || new Map();
1913 }
1914 // Sort queue before flush.
1915 // This ensures that:
1916 // 1. Components are updated from parent to child. (because parent is always
1917 // created before the child so its render effect will have smaller
1918 // priority number)
1919 // 2. If a component is unmounted during a parent component's update,
1920 // its update can be skipped.
1921 queue.sort(comparator);
1922 // conditional usage of checkRecursiveUpdate must be determined out of
1923 // try ... catch block since Rollup by default de-optimizes treeshaking
1924 // inside try-catch. This can leave all warning code unshaked. Although
1925 // they would get eventually shaken by a minifier like terser, some minifiers
1926 // would fail to do that (e.g. https://github.com/evanw/esbuild/issues/1610)
1927 const check = (job) => checkRecursiveUpdates(seen, job)
1928 ;
1929 try {
1930 for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
1931 const job = queue[flushIndex];
1932 if (job && job.active !== false) {
1933 if (true && check(job)) {
1934 continue;
1935 }
1936 // console.log(`running:`, job.id)
1937 callWithErrorHandling(job, null, 14 /* ErrorCodes.SCHEDULER */);
1938 }
1939 }
1940 }
1941 finally {
1942 flushIndex = 0;
1943 queue.length = 0;
1944 flushPostFlushCbs(seen);
1945 isFlushing = false;
1946 currentFlushPromise = null;
1947 // some postFlushCb queued jobs!
1948 // keep flushing until it drains.
1949 if (queue.length || pendingPostFlushCbs.length) {
1950 flushJobs(seen);
1951 }
1952 }
1953}
1954function checkRecursiveUpdates(seen, fn) {
1955 if (!seen.has(fn)) {
1956 seen.set(fn, 1);
1957 }
1958 else {
1959 const count = seen.get(fn);
1960 if (count > RECURSION_LIMIT) {
1961 const instance = fn.ownerInstance;
1962 const componentName = instance && getComponentName(instance.type);
1963 warn(`Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. ` +
1964 `This means you have a reactive effect that is mutating its own ` +
1965 `dependencies and thus recursively triggering itself. Possible sources ` +
1966 `include component template, render function, updated hook or ` +
1967 `watcher source function.`);
1968 return true;
1969 }
1970 else {
1971 seen.set(fn, count + 1);
1972 }
1973 }
1974}
1975
1976/* eslint-disable no-restricted-globals */
1977let isHmrUpdating = false;
1978const hmrDirtyComponents = new Set();
1979// Expose the HMR runtime on the global object
1980// This makes it entirely tree-shakable without polluting the exports and makes
1981// it easier to be used in toolings like vue-loader
1982// Note: for a component to be eligible for HMR it also needs the __hmrId option
1983// to be set so that its instances can be registered / removed.
1984{
1985 getGlobalThis().__VUE_HMR_RUNTIME__ = {
1986 createRecord: tryWrap(createRecord),
1987 rerender: tryWrap(rerender),
1988 reload: tryWrap(reload)
1989 };
1990}
1991const map = new Map();
1992function registerHMR(instance) {
1993 const id = instance.type.__hmrId;
1994 let record = map.get(id);
1995 if (!record) {
1996 createRecord(id, instance.type);
1997 record = map.get(id);
1998 }
1999 record.instances.add(instance);
2000}
2001function unregisterHMR(instance) {
2002 map.get(instance.type.__hmrId).instances.delete(instance);
2003}
2004function createRecord(id, initialDef) {
2005 if (map.has(id)) {
2006 return false;
2007 }
2008 map.set(id, {
2009 initialDef: normalizeClassComponent(initialDef),
2010 instances: new Set()
2011 });
2012 return true;
2013}
2014function normalizeClassComponent(component) {
2015 return isClassComponent(component) ? component.__vccOpts : component;
2016}
2017function rerender(id, newRender) {
2018 const record = map.get(id);
2019 if (!record) {
2020 return;
2021 }
2022 // update initial record (for not-yet-rendered component)
2023 record.initialDef.render = newRender;
2024 [...record.instances].forEach(instance => {
2025 if (newRender) {
2026 instance.render = newRender;
2027 normalizeClassComponent(instance.type).render = newRender;
2028 }
2029 instance.renderCache = [];
2030 // this flag forces child components with slot content to update
2031 isHmrUpdating = true;
2032 instance.update();
2033 isHmrUpdating = false;
2034 });
2035}
2036function reload(id, newComp) {
2037 const record = map.get(id);
2038 if (!record)
2039 return;
2040 newComp = normalizeClassComponent(newComp);
2041 // update initial def (for not-yet-rendered components)
2042 updateComponentDef(record.initialDef, newComp);
2043 // create a snapshot which avoids the set being mutated during updates
2044 const instances = [...record.instances];
2045 for (const instance of instances) {
2046 const oldComp = normalizeClassComponent(instance.type);
2047 if (!hmrDirtyComponents.has(oldComp)) {
2048 // 1. Update existing comp definition to match new one
2049 if (oldComp !== record.initialDef) {
2050 updateComponentDef(oldComp, newComp);
2051 }
2052 // 2. mark definition dirty. This forces the renderer to replace the
2053 // component on patch.
2054 hmrDirtyComponents.add(oldComp);
2055 }
2056 // 3. invalidate options resolution cache
2057 instance.appContext.optionsCache.delete(instance.type);
2058 // 4. actually update
2059 if (instance.ceReload) {
2060 // custom element
2061 hmrDirtyComponents.add(oldComp);
2062 instance.ceReload(newComp.styles);
2063 hmrDirtyComponents.delete(oldComp);
2064 }
2065 else if (instance.parent) {
2066 // 4. Force the parent instance to re-render. This will cause all updated
2067 // components to be unmounted and re-mounted. Queue the update so that we
2068 // don't end up forcing the same parent to re-render multiple times.
2069 queueJob(instance.parent.update);
2070 }
2071 else if (instance.appContext.reload) {
2072 // root instance mounted via createApp() has a reload method
2073 instance.appContext.reload();
2074 }
2075 else if (typeof window !== 'undefined') {
2076 // root instance inside tree created via raw render(). Force reload.
2077 window.location.reload();
2078 }
2079 else {
2080 console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');
2081 }
2082 }
2083 // 5. make sure to cleanup dirty hmr components after update
2084 queuePostFlushCb(() => {
2085 for (const instance of instances) {
2086 hmrDirtyComponents.delete(normalizeClassComponent(instance.type));
2087 }
2088 });
2089}
2090function updateComponentDef(oldComp, newComp) {
2091 extend(oldComp, newComp);
2092 for (const key in oldComp) {
2093 if (key !== '__file' && !(key in newComp)) {
2094 delete oldComp[key];
2095 }
2096 }
2097}
2098function tryWrap(fn) {
2099 return (id, arg) => {
2100 try {
2101 return fn(id, arg);
2102 }
2103 catch (e) {
2104 console.error(e);
2105 console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +
2106 `Full reload required.`);
2107 }
2108 };
2109}
2110
2111let devtools;
2112let buffer = [];
2113let devtoolsNotInstalled = false;
2114function emit$1(event, ...args) {
2115 if (devtools) {
2116 devtools.emit(event, ...args);
2117 }
2118 else if (!devtoolsNotInstalled) {
2119 buffer.push({ event, args });
2120 }
2121}
2122function setDevtoolsHook(hook, target) {
2123 var _a, _b;
2124 devtools = hook;
2125 if (devtools) {
2126 devtools.enabled = true;
2127 buffer.forEach(({ event, args }) => devtools.emit(event, ...args));
2128 buffer = [];
2129 }
2130 else if (
2131 // handle late devtools injection - only do this if we are in an actual
2132 // browser environment to avoid the timer handle stalling test runner exit
2133 // (#4815)
2134 typeof window !== 'undefined' &&
2135 // some envs mock window but not fully
2136 window.HTMLElement &&
2137 // also exclude jsdom
2138 !((_b = (_a = window.navigator) === null || _a === void 0 ? void 0 : _a.userAgent) === null || _b === void 0 ? void 0 : _b.includes('jsdom'))) {
2139 const replay = (target.__VUE_DEVTOOLS_HOOK_REPLAY__ =
2140 target.__VUE_DEVTOOLS_HOOK_REPLAY__ || []);
2141 replay.push((newHook) => {
2142 setDevtoolsHook(newHook, target);
2143 });
2144 // clear buffer after 3s - the user probably doesn't have devtools installed
2145 // at all, and keeping the buffer will cause memory leaks (#4738)
2146 setTimeout(() => {
2147 if (!devtools) {
2148 target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
2149 devtoolsNotInstalled = true;
2150 buffer = [];
2151 }
2152 }, 3000);
2153 }
2154 else {
2155 // non-browser env, assume not installed
2156 devtoolsNotInstalled = true;
2157 buffer = [];
2158 }
2159}
2160function devtoolsInitApp(app, version) {
2161 emit$1("app:init" /* DevtoolsHooks.APP_INIT */, app, version, {
2162 Fragment,
2163 Text,
2164 Comment,
2165 Static
2166 });
2167}
2168function devtoolsUnmountApp(app) {
2169 emit$1("app:unmount" /* DevtoolsHooks.APP_UNMOUNT */, app);
2170}
2171const devtoolsComponentAdded = /*#__PURE__*/ createDevtoolsComponentHook("component:added" /* DevtoolsHooks.COMPONENT_ADDED */);
2172const devtoolsComponentUpdated =
2173/*#__PURE__*/ createDevtoolsComponentHook("component:updated" /* DevtoolsHooks.COMPONENT_UPDATED */);
2174const _devtoolsComponentRemoved = /*#__PURE__*/ createDevtoolsComponentHook("component:removed" /* DevtoolsHooks.COMPONENT_REMOVED */);
2175const devtoolsComponentRemoved = (component) => {
2176 if (devtools &&
2177 typeof devtools.cleanupBuffer === 'function' &&
2178 // remove the component if it wasn't buffered
2179 !devtools.cleanupBuffer(component)) {
2180 _devtoolsComponentRemoved(component);
2181 }
2182};
2183function createDevtoolsComponentHook(hook) {
2184 return (component) => {
2185 emit$1(hook, component.appContext.app, component.uid, component.parent ? component.parent.uid : undefined, component);
2186 };
2187}
2188const devtoolsPerfStart = /*#__PURE__*/ createDevtoolsPerformanceHook("perf:start" /* DevtoolsHooks.PERFORMANCE_START */);
2189const devtoolsPerfEnd = /*#__PURE__*/ createDevtoolsPerformanceHook("perf:end" /* DevtoolsHooks.PERFORMANCE_END */);
2190function createDevtoolsPerformanceHook(hook) {
2191 return (component, type, time) => {
2192 emit$1(hook, component.appContext.app, component.uid, component, type, time);
2193 };
2194}
2195function devtoolsComponentEmit(component, event, params) {
2196 emit$1("component:emit" /* DevtoolsHooks.COMPONENT_EMIT */, component.appContext.app, component, event, params);
2197}
2198
2199function emit(instance, event, ...rawArgs) {
2200 if (instance.isUnmounted)
2201 return;
2202 const props = instance.vnode.props || EMPTY_OBJ;
2203 {
2204 const { emitsOptions, propsOptions: [propsOptions] } = instance;
2205 if (emitsOptions) {
2206 if (!(event in emitsOptions) &&
2207 !(false )) {
2208 if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
2209 warn(`Component emitted event "${event}" but it is neither declared in ` +
2210 `the emits option nor as an "${toHandlerKey(event)}" prop.`);
2211 }
2212 }
2213 else {
2214 const validator = emitsOptions[event];
2215 if (isFunction(validator)) {
2216 const isValid = validator(...rawArgs);
2217 if (!isValid) {
2218 warn(`Invalid event arguments: event validation failed for event "${event}".`);
2219 }
2220 }
2221 }
2222 }
2223 }
2224 let args = rawArgs;
2225 const isModelListener = event.startsWith('update:');
2226 // for v-model update:xxx events, apply modifiers on args
2227 const modelArg = isModelListener && event.slice(7);
2228 if (modelArg && modelArg in props) {
2229 const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`;
2230 const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
2231 if (trim) {
2232 args = rawArgs.map(a => (isString(a) ? a.trim() : a));
2233 }
2234 if (number) {
2235 args = rawArgs.map(looseToNumber);
2236 }
2237 }
2238 {
2239 devtoolsComponentEmit(instance, event, args);
2240 }
2241 {
2242 const lowerCaseEvent = event.toLowerCase();
2243 if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
2244 warn(`Event "${lowerCaseEvent}" is emitted in component ` +
2245 `${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` +
2246 `Note that HTML attributes are case-insensitive and you cannot use ` +
2247 `v-on to listen to camelCase events when using in-DOM templates. ` +
2248 `You should probably use "${hyphenate(event)}" instead of "${event}".`);
2249 }
2250 }
2251 let handlerName;
2252 let handler = props[(handlerName = toHandlerKey(event))] ||
2253 // also try camelCase event handler (#2249)
2254 props[(handlerName = toHandlerKey(camelize(event)))];
2255 // for v-model update:xxx events, also trigger kebab-case equivalent
2256 // for props passed via kebab-case
2257 if (!handler && isModelListener) {
2258 handler = props[(handlerName = toHandlerKey(hyphenate(event)))];
2259 }
2260 if (handler) {
2261 callWithAsyncErrorHandling(handler, instance, 6 /* ErrorCodes.COMPONENT_EVENT_HANDLER */, args);
2262 }
2263 const onceHandler = props[handlerName + `Once`];
2264 if (onceHandler) {
2265 if (!instance.emitted) {
2266 instance.emitted = {};
2267 }
2268 else if (instance.emitted[handlerName]) {
2269 return;
2270 }
2271 instance.emitted[handlerName] = true;
2272 callWithAsyncErrorHandling(onceHandler, instance, 6 /* ErrorCodes.COMPONENT_EVENT_HANDLER */, args);
2273 }
2274}
2275function normalizeEmitsOptions(comp, appContext, asMixin = false) {
2276 const cache = appContext.emitsCache;
2277 const cached = cache.get(comp);
2278 if (cached !== undefined) {
2279 return cached;
2280 }
2281 const raw = comp.emits;
2282 let normalized = {};
2283 // apply mixin/extends props
2284 let hasExtends = false;
2285 if (!isFunction(comp)) {
2286 const extendEmits = (raw) => {
2287 const normalizedFromExtend = normalizeEmitsOptions(raw, appContext, true);
2288 if (normalizedFromExtend) {
2289 hasExtends = true;
2290 extend(normalized, normalizedFromExtend);
2291 }
2292 };
2293 if (!asMixin && appContext.mixins.length) {
2294 appContext.mixins.forEach(extendEmits);
2295 }
2296 if (comp.extends) {
2297 extendEmits(comp.extends);
2298 }
2299 if (comp.mixins) {
2300 comp.mixins.forEach(extendEmits);
2301 }
2302 }
2303 if (!raw && !hasExtends) {
2304 if (isObject(comp)) {
2305 cache.set(comp, null);
2306 }
2307 return null;
2308 }
2309 if (isArray(raw)) {
2310 raw.forEach(key => (normalized[key] = null));
2311 }
2312 else {
2313 extend(normalized, raw);
2314 }
2315 if (isObject(comp)) {
2316 cache.set(comp, normalized);
2317 }
2318 return normalized;
2319}
2320// Check if an incoming prop key is a declared emit event listener.
2321// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
2322// both considered matched listeners.
2323function isEmitListener(options, key) {
2324 if (!options || !isOn(key)) {
2325 return false;
2326 }
2327 key = key.slice(2).replace(/Once$/, '');
2328 return (hasOwn(options, key[0].toLowerCase() + key.slice(1)) ||
2329 hasOwn(options, hyphenate(key)) ||
2330 hasOwn(options, key));
2331}
2332
2333/**
2334 * mark the current rendering instance for asset resolution (e.g.
2335 * resolveComponent, resolveDirective) during render
2336 */
2337let currentRenderingInstance = null;
2338let currentScopeId = null;
2339/**
2340 * Note: rendering calls maybe nested. The function returns the parent rendering
2341 * instance if present, which should be restored after the render is done:
2342 *
2343 * ```js
2344 * const prev = setCurrentRenderingInstance(i)
2345 * // ...render
2346 * setCurrentRenderingInstance(prev)
2347 * ```
2348 */
2349function setCurrentRenderingInstance(instance) {
2350 const prev = currentRenderingInstance;
2351 currentRenderingInstance = instance;
2352 currentScopeId = (instance && instance.type.__scopeId) || null;
2353 return prev;
2354}
2355/**
2356 * Set scope id when creating hoisted vnodes.
2357 * @private compiler helper
2358 */
2359function pushScopeId(id) {
2360 currentScopeId = id;
2361}
2362/**
2363 * Technically we no longer need this after 3.0.8 but we need to keep the same
2364 * API for backwards compat w/ code generated by compilers.
2365 * @private
2366 */
2367function popScopeId() {
2368 currentScopeId = null;
2369}
2370/**
2371 * Only for backwards compat
2372 * @private
2373 */
2374const withScopeId = (_id) => withCtx;
2375/**
2376 * Wrap a slot function to memoize current rendering instance
2377 * @private compiler helper
2378 */
2379function withCtx(fn, ctx = currentRenderingInstance, isNonScopedSlot // false only
2380) {
2381 if (!ctx)
2382 return fn;
2383 // already normalized
2384 if (fn._n) {
2385 return fn;
2386 }
2387 const renderFnWithContext = (...args) => {
2388 // If a user calls a compiled slot inside a template expression (#1745), it
2389 // can mess up block tracking, so by default we disable block tracking and
2390 // force bail out when invoking a compiled slot (indicated by the ._d flag).
2391 // This isn't necessary if rendering a compiled `<slot>`, so we flip the
2392 // ._d flag off when invoking the wrapped fn inside `renderSlot`.
2393 if (renderFnWithContext._d) {
2394 setBlockTracking(-1);
2395 }
2396 const prevInstance = setCurrentRenderingInstance(ctx);
2397 let res;
2398 try {
2399 res = fn(...args);
2400 }
2401 finally {
2402 setCurrentRenderingInstance(prevInstance);
2403 if (renderFnWithContext._d) {
2404 setBlockTracking(1);
2405 }
2406 }
2407 {
2408 devtoolsComponentUpdated(ctx);
2409 }
2410 return res;
2411 };
2412 // mark normalized to avoid duplicated wrapping
2413 renderFnWithContext._n = true;
2414 // mark this as compiled by default
2415 // this is used in vnode.ts -> normalizeChildren() to set the slot
2416 // rendering flag.
2417 renderFnWithContext._c = true;
2418 // disable block tracking by default
2419 renderFnWithContext._d = true;
2420 return renderFnWithContext;
2421}
2422
2423/**
2424 * dev only flag to track whether $attrs was used during render.
2425 * If $attrs was used during render then the warning for failed attrs
2426 * fallthrough can be suppressed.
2427 */
2428let accessedAttrs = false;
2429function markAttrsAccessed() {
2430 accessedAttrs = true;
2431}
2432function renderComponentRoot(instance) {
2433 const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance;
2434 let result;
2435 let fallthroughAttrs;
2436 const prev = setCurrentRenderingInstance(instance);
2437 {
2438 accessedAttrs = false;
2439 }
2440 try {
2441 if (vnode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */) {
2442 // withProxy is a proxy with a different `has` trap only for
2443 // runtime-compiled render functions using `with` block.
2444 const proxyToUse = withProxy || proxy;
2445 result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx));
2446 fallthroughAttrs = attrs;
2447 }
2448 else {
2449 // functional
2450 const render = Component;
2451 // in dev, mark attrs accessed if optional props (attrs === props)
2452 if (true && attrs === props) {
2453 markAttrsAccessed();
2454 }
2455 result = normalizeVNode(render.length > 1
2456 ? render(props, true
2457 ? {
2458 get attrs() {
2459 markAttrsAccessed();
2460 return attrs;
2461 },
2462 slots,
2463 emit
2464 }
2465 : { attrs, slots, emit })
2466 : render(props, null /* we know it doesn't need it */));
2467 fallthroughAttrs = Component.props
2468 ? attrs
2469 : getFunctionalFallthrough(attrs);
2470 }
2471 }
2472 catch (err) {
2473 blockStack.length = 0;
2474 handleError(err, instance, 1 /* ErrorCodes.RENDER_FUNCTION */);
2475 result = createVNode(Comment);
2476 }
2477 // attr merging
2478 // in dev mode, comments are preserved, and it's possible for a template
2479 // to have comments along side the root element which makes it a fragment
2480 let root = result;
2481 let setRoot = undefined;
2482 if (result.patchFlag > 0 &&
2483 result.patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */) {
2484 [root, setRoot] = getChildRoot(result);
2485 }
2486 if (fallthroughAttrs && inheritAttrs !== false) {
2487 const keys = Object.keys(fallthroughAttrs);
2488 const { shapeFlag } = root;
2489 if (keys.length) {
2490 if (shapeFlag & (1 /* ShapeFlags.ELEMENT */ | 6 /* ShapeFlags.COMPONENT */)) {
2491 if (propsOptions && keys.some(isModelListener)) {
2492 // If a v-model listener (onUpdate:xxx) has a corresponding declared
2493 // prop, it indicates this component expects to handle v-model and
2494 // it should not fallthrough.
2495 // related: #1543, #1643, #1989
2496 fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);
2497 }
2498 root = cloneVNode(root, fallthroughAttrs);
2499 }
2500 else if (!accessedAttrs && root.type !== Comment) {
2501 const allAttrs = Object.keys(attrs);
2502 const eventAttrs = [];
2503 const extraAttrs = [];
2504 for (let i = 0, l = allAttrs.length; i < l; i++) {
2505 const key = allAttrs[i];
2506 if (isOn(key)) {
2507 // ignore v-model handlers when they fail to fallthrough
2508 if (!isModelListener(key)) {
2509 // remove `on`, lowercase first letter to reflect event casing
2510 // accurately
2511 eventAttrs.push(key[2].toLowerCase() + key.slice(3));
2512 }
2513 }
2514 else {
2515 extraAttrs.push(key);
2516 }
2517 }
2518 if (extraAttrs.length) {
2519 warn(`Extraneous non-props attributes (` +
2520 `${extraAttrs.join(', ')}) ` +
2521 `were passed to component but could not be automatically inherited ` +
2522 `because component renders fragment or text root nodes.`);
2523 }
2524 if (eventAttrs.length) {
2525 warn(`Extraneous non-emits event listeners (` +
2526 `${eventAttrs.join(', ')}) ` +
2527 `were passed to component but could not be automatically inherited ` +
2528 `because component renders fragment or text root nodes. ` +
2529 `If the listener is intended to be a component custom event listener only, ` +
2530 `declare it using the "emits" option.`);
2531 }
2532 }
2533 }
2534 }
2535 // inherit directives
2536 if (vnode.dirs) {
2537 if (!isElementRoot(root)) {
2538 warn(`Runtime directive used on component with non-element root node. ` +
2539 `The directives will not function as intended.`);
2540 }
2541 // clone before mutating since the root may be a hoisted vnode
2542 root = cloneVNode(root);
2543 root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
2544 }
2545 // inherit transition data
2546 if (vnode.transition) {
2547 if (!isElementRoot(root)) {
2548 warn(`Component inside <Transition> renders non-element root node ` +
2549 `that cannot be animated.`);
2550 }
2551 root.transition = vnode.transition;
2552 }
2553 if (setRoot) {
2554 setRoot(root);
2555 }
2556 else {
2557 result = root;
2558 }
2559 setCurrentRenderingInstance(prev);
2560 return result;
2561}
2562/**
2563 * dev only
2564 * In dev mode, template root level comments are rendered, which turns the
2565 * template into a fragment root, but we need to locate the single element
2566 * root for attrs and scope id processing.
2567 */
2568const getChildRoot = (vnode) => {
2569 const rawChildren = vnode.children;
2570 const dynamicChildren = vnode.dynamicChildren;
2571 const childRoot = filterSingleRoot(rawChildren);
2572 if (!childRoot) {
2573 return [vnode, undefined];
2574 }
2575 const index = rawChildren.indexOf(childRoot);
2576 const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
2577 const setRoot = (updatedRoot) => {
2578 rawChildren[index] = updatedRoot;
2579 if (dynamicChildren) {
2580 if (dynamicIndex > -1) {
2581 dynamicChildren[dynamicIndex] = updatedRoot;
2582 }
2583 else if (updatedRoot.patchFlag > 0) {
2584 vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
2585 }
2586 }
2587 };
2588 return [normalizeVNode(childRoot), setRoot];
2589};
2590function filterSingleRoot(children) {
2591 let singleRoot;
2592 for (let i = 0; i < children.length; i++) {
2593 const child = children[i];
2594 if (isVNode(child)) {
2595 // ignore user comment
2596 if (child.type !== Comment || child.children === 'v-if') {
2597 if (singleRoot) {
2598 // has more than 1 non-comment child, return now
2599 return;
2600 }
2601 else {
2602 singleRoot = child;
2603 }
2604 }
2605 }
2606 else {
2607 return;
2608 }
2609 }
2610 return singleRoot;
2611}
2612const getFunctionalFallthrough = (attrs) => {
2613 let res;
2614 for (const key in attrs) {
2615 if (key === 'class' || key === 'style' || isOn(key)) {
2616 (res || (res = {}))[key] = attrs[key];
2617 }
2618 }
2619 return res;
2620};
2621const filterModelListeners = (attrs, props) => {
2622 const res = {};
2623 for (const key in attrs) {
2624 if (!isModelListener(key) || !(key.slice(9) in props)) {
2625 res[key] = attrs[key];
2626 }
2627 }
2628 return res;
2629};
2630const isElementRoot = (vnode) => {
2631 return (vnode.shapeFlag & (6 /* ShapeFlags.COMPONENT */ | 1 /* ShapeFlags.ELEMENT */) ||
2632 vnode.type === Comment // potential v-if branch switch
2633 );
2634};
2635function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
2636 const { props: prevProps, children: prevChildren, component } = prevVNode;
2637 const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;
2638 const emits = component.emitsOptions;
2639 // Parent component's render function was hot-updated. Since this may have
2640 // caused the child component's slots content to have changed, we need to
2641 // force the child to update as well.
2642 if ((prevChildren || nextChildren) && isHmrUpdating) {
2643 return true;
2644 }
2645 // force child update for runtime directive or transition on component vnode.
2646 if (nextVNode.dirs || nextVNode.transition) {
2647 return true;
2648 }
2649 if (optimized && patchFlag >= 0) {
2650 if (patchFlag & 1024 /* PatchFlags.DYNAMIC_SLOTS */) {
2651 // slot content that references values that might have changed,
2652 // e.g. in a v-for
2653 return true;
2654 }
2655 if (patchFlag & 16 /* PatchFlags.FULL_PROPS */) {
2656 if (!prevProps) {
2657 return !!nextProps;
2658 }
2659 // presence of this flag indicates props are always non-null
2660 return hasPropsChanged(prevProps, nextProps, emits);
2661 }
2662 else if (patchFlag & 8 /* PatchFlags.PROPS */) {
2663 const dynamicProps = nextVNode.dynamicProps;
2664 for (let i = 0; i < dynamicProps.length; i++) {
2665 const key = dynamicProps[i];
2666 if (nextProps[key] !== prevProps[key] &&
2667 !isEmitListener(emits, key)) {
2668 return true;
2669 }
2670 }
2671 }
2672 }
2673 else {
2674 // this path is only taken by manually written render functions
2675 // so presence of any children leads to a forced update
2676 if (prevChildren || nextChildren) {
2677 if (!nextChildren || !nextChildren.$stable) {
2678 return true;
2679 }
2680 }
2681 if (prevProps === nextProps) {
2682 return false;
2683 }
2684 if (!prevProps) {
2685 return !!nextProps;
2686 }
2687 if (!nextProps) {
2688 return true;
2689 }
2690 return hasPropsChanged(prevProps, nextProps, emits);
2691 }
2692 return false;
2693}
2694function hasPropsChanged(prevProps, nextProps, emitsOptions) {
2695 const nextKeys = Object.keys(nextProps);
2696 if (nextKeys.length !== Object.keys(prevProps).length) {
2697 return true;
2698 }
2699 for (let i = 0; i < nextKeys.length; i++) {
2700 const key = nextKeys[i];
2701 if (nextProps[key] !== prevProps[key] &&
2702 !isEmitListener(emitsOptions, key)) {
2703 return true;
2704 }
2705 }
2706 return false;
2707}
2708function updateHOCHostEl({ vnode, parent }, el // HostNode
2709) {
2710 while (parent && parent.subTree === vnode) {
2711 (vnode = parent.vnode).el = el;
2712 parent = parent.parent;
2713 }
2714}
2715
2716const isSuspense = (type) => type.__isSuspense;
2717// Suspense exposes a component-like API, and is treated like a component
2718// in the compiler, but internally it's a special built-in type that hooks
2719// directly into the renderer.
2720const SuspenseImpl = {
2721 name: 'Suspense',
2722 // In order to make Suspense tree-shakable, we need to avoid importing it
2723 // directly in the renderer. The renderer checks for the __isSuspense flag
2724 // on a vnode's type and calls the `process` method, passing in renderer
2725 // internals.
2726 __isSuspense: true,
2727 process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized,
2728 // platform-specific impl passed from renderer
2729 rendererInternals) {
2730 if (n1 == null) {
2731 mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals);
2732 }
2733 else {
2734 patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, rendererInternals);
2735 }
2736 },
2737 hydrate: hydrateSuspense,
2738 create: createSuspenseBoundary,
2739 normalize: normalizeSuspenseChildren
2740};
2741// Force-casted public typing for h and TSX props inference
2742const Suspense = (SuspenseImpl
2743 );
2744function triggerEvent(vnode, name) {
2745 const eventListener = vnode.props && vnode.props[name];
2746 if (isFunction(eventListener)) {
2747 eventListener();
2748 }
2749}
2750function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
2751 const { p: patch, o: { createElement } } = rendererInternals;
2752 const hiddenContainer = createElement('div');
2753 const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals));
2754 // start mounting the content subtree in an off-dom container
2755 patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds);
2756 // now check if we have encountered any async deps
2757 if (suspense.deps > 0) {
2758 // has async
2759 // invoke @fallback event
2760 triggerEvent(vnode, 'onPending');
2761 triggerEvent(vnode, 'onFallback');
2762 // mount the fallback tree
2763 patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
2764 isSVG, slotScopeIds);
2765 setActiveBranch(suspense, vnode.ssFallback);
2766 }
2767 else {
2768 // Suspense has no async deps. Just resolve.
2769 suspense.resolve();
2770 }
2771}
2772function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
2773 const suspense = (n2.suspense = n1.suspense);
2774 suspense.vnode = n2;
2775 n2.el = n1.el;
2776 const newBranch = n2.ssContent;
2777 const newFallback = n2.ssFallback;
2778 const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense;
2779 if (pendingBranch) {
2780 suspense.pendingBranch = newBranch;
2781 if (isSameVNodeType(newBranch, pendingBranch)) {
2782 // same root type but content may have changed.
2783 patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
2784 if (suspense.deps <= 0) {
2785 suspense.resolve();
2786 }
2787 else if (isInFallback) {
2788 patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
2789 isSVG, slotScopeIds, optimized);
2790 setActiveBranch(suspense, newFallback);
2791 }
2792 }
2793 else {
2794 // toggled before pending tree is resolved
2795 suspense.pendingId++;
2796 if (isHydrating) {
2797 // if toggled before hydration is finished, the current DOM tree is
2798 // no longer valid. set it as the active branch so it will be unmounted
2799 // when resolved
2800 suspense.isHydrating = false;
2801 suspense.activeBranch = pendingBranch;
2802 }
2803 else {
2804 unmount(pendingBranch, parentComponent, suspense);
2805 }
2806 // increment pending ID. this is used to invalidate async callbacks
2807 // reset suspense state
2808 suspense.deps = 0;
2809 // discard effects from pending branch
2810 suspense.effects.length = 0;
2811 // discard previous container
2812 suspense.hiddenContainer = createElement('div');
2813 if (isInFallback) {
2814 // already in fallback state
2815 patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
2816 if (suspense.deps <= 0) {
2817 suspense.resolve();
2818 }
2819 else {
2820 patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
2821 isSVG, slotScopeIds, optimized);
2822 setActiveBranch(suspense, newFallback);
2823 }
2824 }
2825 else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
2826 // toggled "back" to current active branch
2827 patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, slotScopeIds, optimized);
2828 // force resolve
2829 suspense.resolve(true);
2830 }
2831 else {
2832 // switched to a 3rd branch
2833 patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
2834 if (suspense.deps <= 0) {
2835 suspense.resolve();
2836 }
2837 }
2838 }
2839 }
2840 else {
2841 if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
2842 // root did not change, just normal patch
2843 patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, slotScopeIds, optimized);
2844 setActiveBranch(suspense, newBranch);
2845 }
2846 else {
2847 // root node toggled
2848 // invoke @pending event
2849 triggerEvent(n2, 'onPending');
2850 // mount pending branch in off-dom container
2851 suspense.pendingBranch = newBranch;
2852 suspense.pendingId++;
2853 patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
2854 if (suspense.deps <= 0) {
2855 // incoming branch has no async deps, resolve now.
2856 suspense.resolve();
2857 }
2858 else {
2859 const { timeout, pendingId } = suspense;
2860 if (timeout > 0) {
2861 setTimeout(() => {
2862 if (suspense.pendingId === pendingId) {
2863 suspense.fallback(newFallback);
2864 }
2865 }, timeout);
2866 }
2867 else if (timeout === 0) {
2868 suspense.fallback(newFallback);
2869 }
2870 }
2871 }
2872 }
2873}
2874let hasWarned = false;
2875function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
2876 /* istanbul ignore if */
2877 if (!hasWarned) {
2878 hasWarned = true;
2879 // @ts-ignore `console.info` cannot be null error
2880 console[console.info ? 'info' : 'log'](`<Suspense> is an experimental feature and its API will likely change.`);
2881 }
2882 const { p: patch, m: move, um: unmount, n: next, o: { parentNode, remove } } = rendererInternals;
2883 const timeout = vnode.props ? toNumber(vnode.props.timeout) : undefined;
2884 {
2885 assertNumber(timeout, `Suspense timeout`);
2886 }
2887 const suspense = {
2888 vnode,
2889 parent,
2890 parentComponent,
2891 isSVG,
2892 container,
2893 hiddenContainer,
2894 anchor,
2895 deps: 0,
2896 pendingId: 0,
2897 timeout: typeof timeout === 'number' ? timeout : -1,
2898 activeBranch: null,
2899 pendingBranch: null,
2900 isInFallback: true,
2901 isHydrating,
2902 isUnmounted: false,
2903 effects: [],
2904 resolve(resume = false) {
2905 {
2906 if (!resume && !suspense.pendingBranch) {
2907 throw new Error(`suspense.resolve() is called without a pending branch.`);
2908 }
2909 if (suspense.isUnmounted) {
2910 throw new Error(`suspense.resolve() is called on an already unmounted suspense boundary.`);
2911 }
2912 }
2913 const { vnode, activeBranch, pendingBranch, pendingId, effects, parentComponent, container } = suspense;
2914 if (suspense.isHydrating) {
2915 suspense.isHydrating = false;
2916 }
2917 else if (!resume) {
2918 const delayEnter = activeBranch &&
2919 pendingBranch.transition &&
2920 pendingBranch.transition.mode === 'out-in';
2921 if (delayEnter) {
2922 activeBranch.transition.afterLeave = () => {
2923 if (pendingId === suspense.pendingId) {
2924 move(pendingBranch, container, anchor, 0 /* MoveType.ENTER */);
2925 }
2926 };
2927 }
2928 // this is initial anchor on mount
2929 let { anchor } = suspense;
2930 // unmount current active tree
2931 if (activeBranch) {
2932 // if the fallback tree was mounted, it may have been moved
2933 // as part of a parent suspense. get the latest anchor for insertion
2934 anchor = next(activeBranch);
2935 unmount(activeBranch, parentComponent, suspense, true);
2936 }
2937 if (!delayEnter) {
2938 // move content from off-dom container to actual container
2939 move(pendingBranch, container, anchor, 0 /* MoveType.ENTER */);
2940 }
2941 }
2942 setActiveBranch(suspense, pendingBranch);
2943 suspense.pendingBranch = null;
2944 suspense.isInFallback = false;
2945 // flush buffered effects
2946 // check if there is a pending parent suspense
2947 let parent = suspense.parent;
2948 let hasUnresolvedAncestor = false;
2949 while (parent) {
2950 if (parent.pendingBranch) {
2951 // found a pending parent suspense, merge buffered post jobs
2952 // into that parent
2953 parent.effects.push(...effects);
2954 hasUnresolvedAncestor = true;
2955 break;
2956 }
2957 parent = parent.parent;
2958 }
2959 // no pending parent suspense, flush all jobs
2960 if (!hasUnresolvedAncestor) {
2961 queuePostFlushCb(effects);
2962 }
2963 suspense.effects = [];
2964 // invoke @resolve event
2965 triggerEvent(vnode, 'onResolve');
2966 },
2967 fallback(fallbackVNode) {
2968 if (!suspense.pendingBranch) {
2969 return;
2970 }
2971 const { vnode, activeBranch, parentComponent, container, isSVG } = suspense;
2972 // invoke @fallback event
2973 triggerEvent(vnode, 'onFallback');
2974 const anchor = next(activeBranch);
2975 const mountFallback = () => {
2976 if (!suspense.isInFallback) {
2977 return;
2978 }
2979 // mount the fallback tree
2980 patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context
2981 isSVG, slotScopeIds, optimized);
2982 setActiveBranch(suspense, fallbackVNode);
2983 };
2984 const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in';
2985 if (delayEnter) {
2986 activeBranch.transition.afterLeave = mountFallback;
2987 }
2988 suspense.isInFallback = true;
2989 // unmount current active branch
2990 unmount(activeBranch, parentComponent, null, // no suspense so unmount hooks fire now
2991 true // shouldRemove
2992 );
2993 if (!delayEnter) {
2994 mountFallback();
2995 }
2996 },
2997 move(container, anchor, type) {
2998 suspense.activeBranch &&
2999 move(suspense.activeBranch, container, anchor, type);
3000 suspense.container = container;
3001 },
3002 next() {
3003 return suspense.activeBranch && next(suspense.activeBranch);
3004 },
3005 registerDep(instance, setupRenderEffect) {
3006 const isInPendingSuspense = !!suspense.pendingBranch;
3007 if (isInPendingSuspense) {
3008 suspense.deps++;
3009 }
3010 const hydratedEl = instance.vnode.el;
3011 instance
3012 .asyncDep.catch(err => {
3013 handleError(err, instance, 0 /* ErrorCodes.SETUP_FUNCTION */);
3014 })
3015 .then(asyncSetupResult => {
3016 // retry when the setup() promise resolves.
3017 // component may have been unmounted before resolve.
3018 if (instance.isUnmounted ||
3019 suspense.isUnmounted ||
3020 suspense.pendingId !== instance.suspenseId) {
3021 return;
3022 }
3023 // retry from this component
3024 instance.asyncResolved = true;
3025 const { vnode } = instance;
3026 {
3027 pushWarningContext(vnode);
3028 }
3029 handleSetupResult(instance, asyncSetupResult, false);
3030 if (hydratedEl) {
3031 // vnode may have been replaced if an update happened before the
3032 // async dep is resolved.
3033 vnode.el = hydratedEl;
3034 }
3035 const placeholder = !hydratedEl && instance.subTree.el;
3036 setupRenderEffect(instance, vnode,
3037 // component may have been moved before resolve.
3038 // if this is not a hydration, instance.subTree will be the comment
3039 // placeholder.
3040 parentNode(hydratedEl || instance.subTree.el),
3041 // anchor will not be used if this is hydration, so only need to
3042 // consider the comment placeholder case.
3043 hydratedEl ? null : next(instance.subTree), suspense, isSVG, optimized);
3044 if (placeholder) {
3045 remove(placeholder);
3046 }
3047 updateHOCHostEl(instance, vnode.el);
3048 {
3049 popWarningContext();
3050 }
3051 // only decrease deps count if suspense is not already resolved
3052 if (isInPendingSuspense && --suspense.deps === 0) {
3053 suspense.resolve();
3054 }
3055 });
3056 },
3057 unmount(parentSuspense, doRemove) {
3058 suspense.isUnmounted = true;
3059 if (suspense.activeBranch) {
3060 unmount(suspense.activeBranch, parentComponent, parentSuspense, doRemove);
3061 }
3062 if (suspense.pendingBranch) {
3063 unmount(suspense.pendingBranch, parentComponent, parentSuspense, doRemove);
3064 }
3065 }
3066 };
3067 return suspense;
3068}
3069function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals, hydrateNode) {
3070 /* eslint-disable no-restricted-globals */
3071 const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, node.parentNode, document.createElement('div'), null, isSVG, slotScopeIds, optimized, rendererInternals, true /* hydrating */));
3072 // there are two possible scenarios for server-rendered suspense:
3073 // - success: ssr content should be fully resolved
3074 // - failure: ssr content should be the fallback branch.
3075 // however, on the client we don't really know if it has failed or not
3076 // attempt to hydrate the DOM assuming it has succeeded, but we still
3077 // need to construct a suspense boundary first
3078 const result = hydrateNode(node, (suspense.pendingBranch = vnode.ssContent), parentComponent, suspense, slotScopeIds, optimized);
3079 if (suspense.deps === 0) {
3080 suspense.resolve();
3081 }
3082 return result;
3083 /* eslint-enable no-restricted-globals */
3084}
3085function normalizeSuspenseChildren(vnode) {
3086 const { shapeFlag, children } = vnode;
3087 const isSlotChildren = shapeFlag & 32 /* ShapeFlags.SLOTS_CHILDREN */;
3088 vnode.ssContent = normalizeSuspenseSlot(isSlotChildren ? children.default : children);
3089 vnode.ssFallback = isSlotChildren
3090 ? normalizeSuspenseSlot(children.fallback)
3091 : createVNode(Comment);
3092}
3093function normalizeSuspenseSlot(s) {
3094 let block;
3095 if (isFunction(s)) {
3096 const trackBlock = isBlockTreeEnabled && s._c;
3097 if (trackBlock) {
3098 // disableTracking: false
3099 // allow block tracking for compiled slots
3100 // (see ./componentRenderContext.ts)
3101 s._d = false;
3102 openBlock();
3103 }
3104 s = s();
3105 if (trackBlock) {
3106 s._d = true;
3107 block = currentBlock;
3108 closeBlock();
3109 }
3110 }
3111 if (isArray(s)) {
3112 const singleChild = filterSingleRoot(s);
3113 if (!singleChild) {
3114 warn(`<Suspense> slots expect a single root node.`);
3115 }
3116 s = singleChild;
3117 }
3118 s = normalizeVNode(s);
3119 if (block && !s.dynamicChildren) {
3120 s.dynamicChildren = block.filter(c => c !== s);
3121 }
3122 return s;
3123}
3124function queueEffectWithSuspense(fn, suspense) {
3125 if (suspense && suspense.pendingBranch) {
3126 if (isArray(fn)) {
3127 suspense.effects.push(...fn);
3128 }
3129 else {
3130 suspense.effects.push(fn);
3131 }
3132 }
3133 else {
3134 queuePostFlushCb(fn);
3135 }
3136}
3137function setActiveBranch(suspense, branch) {
3138 suspense.activeBranch = branch;
3139 const { vnode, parentComponent } = suspense;
3140 const el = (vnode.el = branch.el);
3141 // in case suspense is the root node of a component,
3142 // recursively update the HOC el
3143 if (parentComponent && parentComponent.subTree === vnode) {
3144 parentComponent.vnode.el = el;
3145 updateHOCHostEl(parentComponent, el);
3146 }
3147}
3148
3149function provide(key, value) {
3150 if (!currentInstance) {
3151 {
3152 warn(`provide() can only be used inside setup().`);
3153 }
3154 }
3155 else {
3156 let provides = currentInstance.provides;
3157 // by default an instance inherits its parent's provides object
3158 // but when it needs to provide values of its own, it creates its
3159 // own provides object using parent provides object as prototype.
3160 // this way in `inject` we can simply look up injections from direct
3161 // parent and let the prototype chain do the work.
3162 const parentProvides = currentInstance.parent && currentInstance.parent.provides;
3163 if (parentProvides === provides) {
3164 provides = currentInstance.provides = Object.create(parentProvides);
3165 }
3166 // TS doesn't allow symbol as index type
3167 provides[key] = value;
3168 }
3169}
3170function inject(key, defaultValue, treatDefaultAsFactory = false) {
3171 // fallback to `currentRenderingInstance` so that this can be called in
3172 // a functional component
3173 const instance = currentInstance || currentRenderingInstance;
3174 if (instance) {
3175 // #2400
3176 // to support `app.use` plugins,
3177 // fallback to appContext's `provides` if the instance is at root
3178 const provides = instance.parent == null
3179 ? instance.vnode.appContext && instance.vnode.appContext.provides
3180 : instance.parent.provides;
3181 if (provides && key in provides) {
3182 // TS doesn't allow symbol as index type
3183 return provides[key];
3184 }
3185 else if (arguments.length > 1) {
3186 return treatDefaultAsFactory && isFunction(defaultValue)
3187 ? defaultValue.call(instance.proxy)
3188 : defaultValue;
3189 }
3190 else {
3191 warn(`injection "${String(key)}" not found.`);
3192 }
3193 }
3194 else {
3195 warn(`inject() can only be used inside setup() or functional components.`);
3196 }
3197}
3198
3199// Simple effect.
3200function watchEffect(effect, options) {
3201 return doWatch(effect, null, options);
3202}
3203function watchPostEffect(effect, options) {
3204 return doWatch(effect, null, Object.assign(Object.assign({}, options), { flush: 'post' }) );
3205}
3206function watchSyncEffect(effect, options) {
3207 return doWatch(effect, null, Object.assign(Object.assign({}, options), { flush: 'sync' }) );
3208}
3209// initial value for watchers to trigger on undefined initial values
3210const INITIAL_WATCHER_VALUE = {};
3211// implementation
3212function watch(source, cb, options) {
3213 if (!isFunction(cb)) {
3214 warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` +
3215 `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
3216 `supports \`watch(source, cb, options?) signature.`);
3217 }
3218 return doWatch(source, cb, options);
3219}
3220function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {
3221 if (!cb) {
3222 if (immediate !== undefined) {
3223 warn(`watch() "immediate" option is only respected when using the ` +
3224 `watch(source, callback, options?) signature.`);
3225 }
3226 if (deep !== undefined) {
3227 warn(`watch() "deep" option is only respected when using the ` +
3228 `watch(source, callback, options?) signature.`);
3229 }
3230 }
3231 const warnInvalidSource = (s) => {
3232 warn(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` +
3233 `a reactive object, or an array of these types.`);
3234 };
3235 const instance = getCurrentScope() === (currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.scope) ? currentInstance : null;
3236 // const instance = currentInstance
3237 let getter;
3238 let forceTrigger = false;
3239 let isMultiSource = false;
3240 if (isRef(source)) {
3241 getter = () => source.value;
3242 forceTrigger = isShallow(source);
3243 }
3244 else if (isReactive(source)) {
3245 getter = () => source;
3246 deep = true;
3247 }
3248 else if (isArray(source)) {
3249 isMultiSource = true;
3250 forceTrigger = source.some(s => isReactive(s) || isShallow(s));
3251 getter = () => source.map(s => {
3252 if (isRef(s)) {
3253 return s.value;
3254 }
3255 else if (isReactive(s)) {
3256 return traverse(s);
3257 }
3258 else if (isFunction(s)) {
3259 return callWithErrorHandling(s, instance, 2 /* ErrorCodes.WATCH_GETTER */);
3260 }
3261 else {
3262 warnInvalidSource(s);
3263 }
3264 });
3265 }
3266 else if (isFunction(source)) {
3267 if (cb) {
3268 // getter with cb
3269 getter = () => callWithErrorHandling(source, instance, 2 /* ErrorCodes.WATCH_GETTER */);
3270 }
3271 else {
3272 // no cb -> simple effect
3273 getter = () => {
3274 if (instance && instance.isUnmounted) {
3275 return;
3276 }
3277 if (cleanup) {
3278 cleanup();
3279 }
3280 return callWithAsyncErrorHandling(source, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [onCleanup]);
3281 };
3282 }
3283 }
3284 else {
3285 getter = NOOP;
3286 warnInvalidSource(source);
3287 }
3288 if (cb && deep) {
3289 const baseGetter = getter;
3290 getter = () => traverse(baseGetter());
3291 }
3292 let cleanup;
3293 let onCleanup = (fn) => {
3294 cleanup = effect.onStop = () => {
3295 callWithErrorHandling(fn, instance, 4 /* ErrorCodes.WATCH_CLEANUP */);
3296 };
3297 };
3298 let oldValue = isMultiSource
3299 ? new Array(source.length).fill(INITIAL_WATCHER_VALUE)
3300 : INITIAL_WATCHER_VALUE;
3301 const job = () => {
3302 if (!effect.active) {
3303 return;
3304 }
3305 if (cb) {
3306 // watch(source, cb)
3307 const newValue = effect.run();
3308 if (deep ||
3309 forceTrigger ||
3310 (isMultiSource
3311 ? newValue.some((v, i) => hasChanged(v, oldValue[i]))
3312 : hasChanged(newValue, oldValue)) ||
3313 (false )) {
3314 // cleanup before running cb again
3315 if (cleanup) {
3316 cleanup();
3317 }
3318 callWithAsyncErrorHandling(cb, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [
3319 newValue,
3320 // pass undefined as the old value when it's changed for the first time
3321 oldValue === INITIAL_WATCHER_VALUE
3322 ? undefined
3323 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
3324 ? []
3325 : oldValue,
3326 onCleanup
3327 ]);
3328 oldValue = newValue;
3329 }
3330 }
3331 else {
3332 // watchEffect
3333 effect.run();
3334 }
3335 };
3336 // important: mark the job as a watcher callback so that scheduler knows
3337 // it is allowed to self-trigger (#1727)
3338 job.allowRecurse = !!cb;
3339 let scheduler;
3340 if (flush === 'sync') {
3341 scheduler = job; // the scheduler function gets called directly
3342 }
3343 else if (flush === 'post') {
3344 scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
3345 }
3346 else {
3347 // default: 'pre'
3348 job.pre = true;
3349 if (instance)
3350 job.id = instance.uid;
3351 scheduler = () => queueJob(job);
3352 }
3353 const effect = new ReactiveEffect(getter, scheduler);
3354 {
3355 effect.onTrack = onTrack;
3356 effect.onTrigger = onTrigger;
3357 }
3358 // initial run
3359 if (cb) {
3360 if (immediate) {
3361 job();
3362 }
3363 else {
3364 oldValue = effect.run();
3365 }
3366 }
3367 else if (flush === 'post') {
3368 queuePostRenderEffect(effect.run.bind(effect), instance && instance.suspense);
3369 }
3370 else {
3371 effect.run();
3372 }
3373 const unwatch = () => {
3374 effect.stop();
3375 if (instance && instance.scope) {
3376 remove(instance.scope.effects, effect);
3377 }
3378 };
3379 return unwatch;
3380}
3381// this.$watch
3382function instanceWatch(source, value, options) {
3383 const publicThis = this.proxy;
3384 const getter = isString(source)
3385 ? source.includes('.')
3386 ? createPathGetter(publicThis, source)
3387 : () => publicThis[source]
3388 : source.bind(publicThis, publicThis);
3389 let cb;
3390 if (isFunction(value)) {
3391 cb = value;
3392 }
3393 else {
3394 cb = value.handler;
3395 options = value;
3396 }
3397 const cur = currentInstance;
3398 setCurrentInstance(this);
3399 const res = doWatch(getter, cb.bind(publicThis), options);
3400 if (cur) {
3401 setCurrentInstance(cur);
3402 }
3403 else {
3404 unsetCurrentInstance();
3405 }
3406 return res;
3407}
3408function createPathGetter(ctx, path) {
3409 const segments = path.split('.');
3410 return () => {
3411 let cur = ctx;
3412 for (let i = 0; i < segments.length && cur; i++) {
3413 cur = cur[segments[i]];
3414 }
3415 return cur;
3416 };
3417}
3418function traverse(value, seen) {
3419 if (!isObject(value) || value["__v_skip" /* ReactiveFlags.SKIP */]) {
3420 return value;
3421 }
3422 seen = seen || new Set();
3423 if (seen.has(value)) {
3424 return value;
3425 }
3426 seen.add(value);
3427 if (isRef(value)) {
3428 traverse(value.value, seen);
3429 }
3430 else if (isArray(value)) {
3431 for (let i = 0; i < value.length; i++) {
3432 traverse(value[i], seen);
3433 }
3434 }
3435 else if (isSet(value) || isMap(value)) {
3436 value.forEach((v) => {
3437 traverse(v, seen);
3438 });
3439 }
3440 else if (isPlainObject(value)) {
3441 for (const key in value) {
3442 traverse(value[key], seen);
3443 }
3444 }
3445 return value;
3446}
3447
3448function useTransitionState() {
3449 const state = {
3450 isMounted: false,
3451 isLeaving: false,
3452 isUnmounting: false,
3453 leavingVNodes: new Map()
3454 };
3455 onMounted(() => {
3456 state.isMounted = true;
3457 });
3458 onBeforeUnmount(() => {
3459 state.isUnmounting = true;
3460 });
3461 return state;
3462}
3463const TransitionHookValidator = [Function, Array];
3464const BaseTransitionImpl = {
3465 name: `BaseTransition`,
3466 props: {
3467 mode: String,
3468 appear: Boolean,
3469 persisted: Boolean,
3470 // enter
3471 onBeforeEnter: TransitionHookValidator,
3472 onEnter: TransitionHookValidator,
3473 onAfterEnter: TransitionHookValidator,
3474 onEnterCancelled: TransitionHookValidator,
3475 // leave
3476 onBeforeLeave: TransitionHookValidator,
3477 onLeave: TransitionHookValidator,
3478 onAfterLeave: TransitionHookValidator,
3479 onLeaveCancelled: TransitionHookValidator,
3480 // appear
3481 onBeforeAppear: TransitionHookValidator,
3482 onAppear: TransitionHookValidator,
3483 onAfterAppear: TransitionHookValidator,
3484 onAppearCancelled: TransitionHookValidator
3485 },
3486 setup(props, { slots }) {
3487 const instance = getCurrentInstance();
3488 const state = useTransitionState();
3489 let prevTransitionKey;
3490 return () => {
3491 const children = slots.default && getTransitionRawChildren(slots.default(), true);
3492 if (!children || !children.length) {
3493 return;
3494 }
3495 let child = children[0];
3496 if (children.length > 1) {
3497 let hasFound = false;
3498 // locate first non-comment child
3499 for (const c of children) {
3500 if (c.type !== Comment) {
3501 if (hasFound) {
3502 // warn more than one non-comment child
3503 warn('<transition> can only be used on a single element or component. ' +
3504 'Use <transition-group> for lists.');
3505 break;
3506 }
3507 child = c;
3508 hasFound = true;
3509 }
3510 }
3511 }
3512 // there's no need to track reactivity for these props so use the raw
3513 // props for a bit better perf
3514 const rawProps = toRaw(props);
3515 const { mode } = rawProps;
3516 // check mode
3517 if (mode &&
3518 mode !== 'in-out' &&
3519 mode !== 'out-in' &&
3520 mode !== 'default') {
3521 warn(`invalid <transition> mode: ${mode}`);
3522 }
3523 if (state.isLeaving) {
3524 return emptyPlaceholder(child);
3525 }
3526 // in the case of <transition><keep-alive/></transition>, we need to
3527 // compare the type of the kept-alive children.
3528 const innerChild = getKeepAliveChild(child);
3529 if (!innerChild) {
3530 return emptyPlaceholder(child);
3531 }
3532 const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);
3533 setTransitionHooks(innerChild, enterHooks);
3534 const oldChild = instance.subTree;
3535 const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
3536 let transitionKeyChanged = false;
3537 const { getTransitionKey } = innerChild.type;
3538 if (getTransitionKey) {
3539 const key = getTransitionKey();
3540 if (prevTransitionKey === undefined) {
3541 prevTransitionKey = key;
3542 }
3543 else if (key !== prevTransitionKey) {
3544 prevTransitionKey = key;
3545 transitionKeyChanged = true;
3546 }
3547 }
3548 // handle mode
3549 if (oldInnerChild &&
3550 oldInnerChild.type !== Comment &&
3551 (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
3552 const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);
3553 // update old tree's hooks in case of dynamic transition
3554 setTransitionHooks(oldInnerChild, leavingHooks);
3555 // switching between different views
3556 if (mode === 'out-in') {
3557 state.isLeaving = true;
3558 // return placeholder node and queue update when leave finishes
3559 leavingHooks.afterLeave = () => {
3560 state.isLeaving = false;
3561 // #6835
3562 // it also needs to be updated when active is undefined
3563 if (instance.update.active !== false) {
3564 instance.update();
3565 }
3566 };
3567 return emptyPlaceholder(child);
3568 }
3569 else if (mode === 'in-out' && innerChild.type !== Comment) {
3570 leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
3571 const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);
3572 leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
3573 // early removal callback
3574 el._leaveCb = () => {
3575 earlyRemove();
3576 el._leaveCb = undefined;
3577 delete enterHooks.delayedLeave;
3578 };
3579 enterHooks.delayedLeave = delayedLeave;
3580 };
3581 }
3582 }
3583 return child;
3584 };
3585 }
3586};
3587// export the public type for h/tsx inference
3588// also to avoid inline import() in generated d.ts files
3589const BaseTransition = BaseTransitionImpl;
3590function getLeavingNodesForType(state, vnode) {
3591 const { leavingVNodes } = state;
3592 let leavingVNodesCache = leavingVNodes.get(vnode.type);
3593 if (!leavingVNodesCache) {
3594 leavingVNodesCache = Object.create(null);
3595 leavingVNodes.set(vnode.type, leavingVNodesCache);
3596 }
3597 return leavingVNodesCache;
3598}
3599// The transition hooks are attached to the vnode as vnode.transition
3600// and will be called at appropriate timing in the renderer.
3601function resolveTransitionHooks(vnode, props, state, instance) {
3602 const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;
3603 const key = String(vnode.key);
3604 const leavingVNodesCache = getLeavingNodesForType(state, vnode);
3605 const callHook = (hook, args) => {
3606 hook &&
3607 callWithAsyncErrorHandling(hook, instance, 9 /* ErrorCodes.TRANSITION_HOOK */, args);
3608 };
3609 const callAsyncHook = (hook, args) => {
3610 const done = args[1];
3611 callHook(hook, args);
3612 if (isArray(hook)) {
3613 if (hook.every(hook => hook.length <= 1))
3614 done();
3615 }
3616 else if (hook.length <= 1) {
3617 done();
3618 }
3619 };
3620 const hooks = {
3621 mode,
3622 persisted,
3623 beforeEnter(el) {
3624 let hook = onBeforeEnter;
3625 if (!state.isMounted) {
3626 if (appear) {
3627 hook = onBeforeAppear || onBeforeEnter;
3628 }
3629 else {
3630 return;
3631 }
3632 }
3633 // for same element (v-show)
3634 if (el._leaveCb) {
3635 el._leaveCb(true /* cancelled */);
3636 }
3637 // for toggled element with same key (v-if)
3638 const leavingVNode = leavingVNodesCache[key];
3639 if (leavingVNode &&
3640 isSameVNodeType(vnode, leavingVNode) &&
3641 leavingVNode.el._leaveCb) {
3642 // force early removal (not cancelled)
3643 leavingVNode.el._leaveCb();
3644 }
3645 callHook(hook, [el]);
3646 },
3647 enter(el) {
3648 let hook = onEnter;
3649 let afterHook = onAfterEnter;
3650 let cancelHook = onEnterCancelled;
3651 if (!state.isMounted) {
3652 if (appear) {
3653 hook = onAppear || onEnter;
3654 afterHook = onAfterAppear || onAfterEnter;
3655 cancelHook = onAppearCancelled || onEnterCancelled;
3656 }
3657 else {
3658 return;
3659 }
3660 }
3661 let called = false;
3662 const done = (el._enterCb = (cancelled) => {
3663 if (called)
3664 return;
3665 called = true;
3666 if (cancelled) {
3667 callHook(cancelHook, [el]);
3668 }
3669 else {
3670 callHook(afterHook, [el]);
3671 }
3672 if (hooks.delayedLeave) {
3673 hooks.delayedLeave();
3674 }
3675 el._enterCb = undefined;
3676 });
3677 if (hook) {
3678 callAsyncHook(hook, [el, done]);
3679 }
3680 else {
3681 done();
3682 }
3683 },
3684 leave(el, remove) {
3685 const key = String(vnode.key);
3686 if (el._enterCb) {
3687 el._enterCb(true /* cancelled */);
3688 }
3689 if (state.isUnmounting) {
3690 return remove();
3691 }
3692 callHook(onBeforeLeave, [el]);
3693 let called = false;
3694 const done = (el._leaveCb = (cancelled) => {
3695 if (called)
3696 return;
3697 called = true;
3698 remove();
3699 if (cancelled) {
3700 callHook(onLeaveCancelled, [el]);
3701 }
3702 else {
3703 callHook(onAfterLeave, [el]);
3704 }
3705 el._leaveCb = undefined;
3706 if (leavingVNodesCache[key] === vnode) {
3707 delete leavingVNodesCache[key];
3708 }
3709 });
3710 leavingVNodesCache[key] = vnode;
3711 if (onLeave) {
3712 callAsyncHook(onLeave, [el, done]);
3713 }
3714 else {
3715 done();
3716 }
3717 },
3718 clone(vnode) {
3719 return resolveTransitionHooks(vnode, props, state, instance);
3720 }
3721 };
3722 return hooks;
3723}
3724// the placeholder really only handles one special case: KeepAlive
3725// in the case of a KeepAlive in a leave phase we need to return a KeepAlive
3726// placeholder with empty content to avoid the KeepAlive instance from being
3727// unmounted.
3728function emptyPlaceholder(vnode) {
3729 if (isKeepAlive(vnode)) {
3730 vnode = cloneVNode(vnode);
3731 vnode.children = null;
3732 return vnode;
3733 }
3734}
3735function getKeepAliveChild(vnode) {
3736 return isKeepAlive(vnode)
3737 ? vnode.children
3738 ? vnode.children[0]
3739 : undefined
3740 : vnode;
3741}
3742function setTransitionHooks(vnode, hooks) {
3743 if (vnode.shapeFlag & 6 /* ShapeFlags.COMPONENT */ && vnode.component) {
3744 setTransitionHooks(vnode.component.subTree, hooks);
3745 }
3746 else if (vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
3747 vnode.ssContent.transition = hooks.clone(vnode.ssContent);
3748 vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);
3749 }
3750 else {
3751 vnode.transition = hooks;
3752 }
3753}
3754function getTransitionRawChildren(children, keepComment = false, parentKey) {
3755 let ret = [];
3756 let keyedFragmentCount = 0;
3757 for (let i = 0; i < children.length; i++) {
3758 let child = children[i];
3759 // #5360 inherit parent key in case of <template v-for>
3760 const key = parentKey == null
3761 ? child.key
3762 : String(parentKey) + String(child.key != null ? child.key : i);
3763 // handle fragment children case, e.g. v-for
3764 if (child.type === Fragment) {
3765 if (child.patchFlag & 128 /* PatchFlags.KEYED_FRAGMENT */)
3766 keyedFragmentCount++;
3767 ret = ret.concat(getTransitionRawChildren(child.children, keepComment, key));
3768 }
3769 // comment placeholders should be skipped, e.g. v-if
3770 else if (keepComment || child.type !== Comment) {
3771 ret.push(key != null ? cloneVNode(child, { key }) : child);
3772 }
3773 }
3774 // #1126 if a transition children list contains multiple sub fragments, these
3775 // fragments will be merged into a flat children array. Since each v-for
3776 // fragment may contain different static bindings inside, we need to de-op
3777 // these children to force full diffs to ensure correct behavior.
3778 if (keyedFragmentCount > 1) {
3779 for (let i = 0; i < ret.length; i++) {
3780 ret[i].patchFlag = -2 /* PatchFlags.BAIL */;
3781 }
3782 }
3783 return ret;
3784}
3785
3786// implementation, close to no-op
3787function defineComponent(options) {
3788 return isFunction(options) ? { setup: options, name: options.name } : options;
3789}
3790
3791const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
3792function defineAsyncComponent(source) {
3793 if (isFunction(source)) {
3794 source = { loader: source };
3795 }
3796 const { loader, loadingComponent, errorComponent, delay = 200, timeout, // undefined = never times out
3797 suspensible = true, onError: userOnError } = source;
3798 let pendingRequest = null;
3799 let resolvedComp;
3800 let retries = 0;
3801 const retry = () => {
3802 retries++;
3803 pendingRequest = null;
3804 return load();
3805 };
3806 const load = () => {
3807 let thisRequest;
3808 return (pendingRequest ||
3809 (thisRequest = pendingRequest =
3810 loader()
3811 .catch(err => {
3812 err = err instanceof Error ? err : new Error(String(err));
3813 if (userOnError) {
3814 return new Promise((resolve, reject) => {
3815 const userRetry = () => resolve(retry());
3816 const userFail = () => reject(err);
3817 userOnError(err, userRetry, userFail, retries + 1);
3818 });
3819 }
3820 else {
3821 throw err;
3822 }
3823 })
3824 .then((comp) => {
3825 if (thisRequest !== pendingRequest && pendingRequest) {
3826 return pendingRequest;
3827 }
3828 if (!comp) {
3829 warn(`Async component loader resolved to undefined. ` +
3830 `If you are using retry(), make sure to return its return value.`);
3831 }
3832 // interop module default
3833 if (comp &&
3834 (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) {
3835 comp = comp.default;
3836 }
3837 if (comp && !isObject(comp) && !isFunction(comp)) {
3838 throw new Error(`Invalid async component load result: ${comp}`);
3839 }
3840 resolvedComp = comp;
3841 return comp;
3842 })));
3843 };
3844 return defineComponent({
3845 name: 'AsyncComponentWrapper',
3846 __asyncLoader: load,
3847 get __asyncResolved() {
3848 return resolvedComp;
3849 },
3850 setup() {
3851 const instance = currentInstance;
3852 // already resolved
3853 if (resolvedComp) {
3854 return () => createInnerComp(resolvedComp, instance);
3855 }
3856 const onError = (err) => {
3857 pendingRequest = null;
3858 handleError(err, instance, 13 /* ErrorCodes.ASYNC_COMPONENT_LOADER */, !errorComponent /* do not throw in dev if user provided error component */);
3859 };
3860 // suspense-controlled or SSR.
3861 if ((suspensible && instance.suspense) ||
3862 (false )) {
3863 return load()
3864 .then(comp => {
3865 return () => createInnerComp(comp, instance);
3866 })
3867 .catch(err => {
3868 onError(err);
3869 return () => errorComponent
3870 ? createVNode(errorComponent, {
3871 error: err
3872 })
3873 : null;
3874 });
3875 }
3876 const loaded = ref(false);
3877 const error = ref();
3878 const delayed = ref(!!delay);
3879 if (delay) {
3880 setTimeout(() => {
3881 delayed.value = false;
3882 }, delay);
3883 }
3884 if (timeout != null) {
3885 setTimeout(() => {
3886 if (!loaded.value && !error.value) {
3887 const err = new Error(`Async component timed out after ${timeout}ms.`);
3888 onError(err);
3889 error.value = err;
3890 }
3891 }, timeout);
3892 }
3893 load()
3894 .then(() => {
3895 loaded.value = true;
3896 if (instance.parent && isKeepAlive(instance.parent.vnode)) {
3897 // parent is keep-alive, force update so the loaded component's
3898 // name is taken into account
3899 queueJob(instance.parent.update);
3900 }
3901 })
3902 .catch(err => {
3903 onError(err);
3904 error.value = err;
3905 });
3906 return () => {
3907 if (loaded.value && resolvedComp) {
3908 return createInnerComp(resolvedComp, instance);
3909 }
3910 else if (error.value && errorComponent) {
3911 return createVNode(errorComponent, {
3912 error: error.value
3913 });
3914 }
3915 else if (loadingComponent && !delayed.value) {
3916 return createVNode(loadingComponent);
3917 }
3918 };
3919 }
3920 });
3921}
3922function createInnerComp(comp, parent) {
3923 const { ref, props, children, ce } = parent.vnode;
3924 const vnode = createVNode(comp, props, children);
3925 // ensure inner component inherits the async wrapper's ref owner
3926 vnode.ref = ref;
3927 // pass the custom element callback on to the inner comp
3928 // and remove it from the async wrapper
3929 vnode.ce = ce;
3930 delete parent.vnode.ce;
3931 return vnode;
3932}
3933
3934const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
3935const KeepAliveImpl = {
3936 name: `KeepAlive`,
3937 // Marker for special handling inside the renderer. We are not using a ===
3938 // check directly on KeepAlive in the renderer, because importing it directly
3939 // would prevent it from being tree-shaken.
3940 __isKeepAlive: true,
3941 props: {
3942 include: [String, RegExp, Array],
3943 exclude: [String, RegExp, Array],
3944 max: [String, Number]
3945 },
3946 setup(props, { slots }) {
3947 const instance = getCurrentInstance();
3948 // KeepAlive communicates with the instantiated renderer via the
3949 // ctx where the renderer passes in its internals,
3950 // and the KeepAlive instance exposes activate/deactivate implementations.
3951 // The whole point of this is to avoid importing KeepAlive directly in the
3952 // renderer to facilitate tree-shaking.
3953 const sharedContext = instance.ctx;
3954 const cache = new Map();
3955 const keys = new Set();
3956 let current = null;
3957 {
3958 instance.__v_cache = cache;
3959 }
3960 const parentSuspense = instance.suspense;
3961 const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext;
3962 const storageContainer = createElement('div');
3963 sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
3964 const instance = vnode.component;
3965 move(vnode, container, anchor, 0 /* MoveType.ENTER */, parentSuspense);
3966 // in case props have changed
3967 patch(instance.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, vnode.slotScopeIds, optimized);
3968 queuePostRenderEffect(() => {
3969 instance.isDeactivated = false;
3970 if (instance.a) {
3971 invokeArrayFns(instance.a);
3972 }
3973 const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
3974 if (vnodeHook) {
3975 invokeVNodeHook(vnodeHook, instance.parent, vnode);
3976 }
3977 }, parentSuspense);
3978 {
3979 // Update components tree
3980 devtoolsComponentAdded(instance);
3981 }
3982 };
3983 sharedContext.deactivate = (vnode) => {
3984 const instance = vnode.component;
3985 move(vnode, storageContainer, null, 1 /* MoveType.LEAVE */, parentSuspense);
3986 queuePostRenderEffect(() => {
3987 if (instance.da) {
3988 invokeArrayFns(instance.da);
3989 }
3990 const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
3991 if (vnodeHook) {
3992 invokeVNodeHook(vnodeHook, instance.parent, vnode);
3993 }
3994 instance.isDeactivated = true;
3995 }, parentSuspense);
3996 {
3997 // Update components tree
3998 devtoolsComponentAdded(instance);
3999 }
4000 };
4001 function unmount(vnode) {
4002 // reset the shapeFlag so it can be properly unmounted
4003 resetShapeFlag(vnode);
4004 _unmount(vnode, instance, parentSuspense, true);
4005 }
4006 function pruneCache(filter) {
4007 cache.forEach((vnode, key) => {
4008 const name = getComponentName(vnode.type);
4009 if (name && (!filter || !filter(name))) {
4010 pruneCacheEntry(key);
4011 }
4012 });
4013 }
4014 function pruneCacheEntry(key) {
4015 const cached = cache.get(key);
4016 if (!current || !isSameVNodeType(cached, current)) {
4017 unmount(cached);
4018 }
4019 else if (current) {
4020 // current active instance should no longer be kept-alive.
4021 // we can't unmount it now but it might be later, so reset its flag now.
4022 resetShapeFlag(current);
4023 }
4024 cache.delete(key);
4025 keys.delete(key);
4026 }
4027 // prune cache on include/exclude prop change
4028 watch(() => [props.include, props.exclude], ([include, exclude]) => {
4029 include && pruneCache(name => matches(include, name));
4030 exclude && pruneCache(name => !matches(exclude, name));
4031 },
4032 // prune post-render after `current` has been updated
4033 { flush: 'post', deep: true });
4034 // cache sub tree after render
4035 let pendingCacheKey = null;
4036 const cacheSubtree = () => {
4037 // fix #1621, the pendingCacheKey could be 0
4038 if (pendingCacheKey != null) {
4039 cache.set(pendingCacheKey, getInnerChild(instance.subTree));
4040 }
4041 };
4042 onMounted(cacheSubtree);
4043 onUpdated(cacheSubtree);
4044 onBeforeUnmount(() => {
4045 cache.forEach(cached => {
4046 const { subTree, suspense } = instance;
4047 const vnode = getInnerChild(subTree);
4048 if (cached.type === vnode.type && cached.key === vnode.key) {
4049 // current instance will be unmounted as part of keep-alive's unmount
4050 resetShapeFlag(vnode);
4051 // but invoke its deactivated hook here
4052 const da = vnode.component.da;
4053 da && queuePostRenderEffect(da, suspense);
4054 return;
4055 }
4056 unmount(cached);
4057 });
4058 });
4059 return () => {
4060 pendingCacheKey = null;
4061 if (!slots.default) {
4062 return null;
4063 }
4064 const children = slots.default();
4065 const rawVNode = children[0];
4066 if (children.length > 1) {
4067 {
4068 warn(`KeepAlive should contain exactly one component child.`);
4069 }
4070 current = null;
4071 return children;
4072 }
4073 else if (!isVNode(rawVNode) ||
4074 (!(rawVNode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */) &&
4075 !(rawVNode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */))) {
4076 current = null;
4077 return rawVNode;
4078 }
4079 let vnode = getInnerChild(rawVNode);
4080 const comp = vnode.type;
4081 // for async components, name check should be based in its loaded
4082 // inner component if available
4083 const name = getComponentName(isAsyncWrapper(vnode)
4084 ? vnode.type.__asyncResolved || {}
4085 : comp);
4086 const { include, exclude, max } = props;
4087 if ((include && (!name || !matches(include, name))) ||
4088 (exclude && name && matches(exclude, name))) {
4089 current = vnode;
4090 return rawVNode;
4091 }
4092 const key = vnode.key == null ? comp : vnode.key;
4093 const cachedVNode = cache.get(key);
4094 // clone vnode if it's reused because we are going to mutate it
4095 if (vnode.el) {
4096 vnode = cloneVNode(vnode);
4097 if (rawVNode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
4098 rawVNode.ssContent = vnode;
4099 }
4100 }
4101 // #1513 it's possible for the returned vnode to be cloned due to attr
4102 // fallthrough or scopeId, so the vnode here may not be the final vnode
4103 // that is mounted. Instead of caching it directly, we store the pending
4104 // key and cache `instance.subTree` (the normalized vnode) in
4105 // beforeMount/beforeUpdate hooks.
4106 pendingCacheKey = key;
4107 if (cachedVNode) {
4108 // copy over mounted state
4109 vnode.el = cachedVNode.el;
4110 vnode.component = cachedVNode.component;
4111 if (vnode.transition) {
4112 // recursively update transition hooks on subTree
4113 setTransitionHooks(vnode, vnode.transition);
4114 }
4115 // avoid vnode being mounted as fresh
4116 vnode.shapeFlag |= 512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
4117 // make this key the freshest
4118 keys.delete(key);
4119 keys.add(key);
4120 }
4121 else {
4122 keys.add(key);
4123 // prune oldest entry
4124 if (max && keys.size > parseInt(max, 10)) {
4125 pruneCacheEntry(keys.values().next().value);
4126 }
4127 }
4128 // avoid vnode being unmounted
4129 vnode.shapeFlag |= 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
4130 current = vnode;
4131 return isSuspense(rawVNode.type) ? rawVNode : vnode;
4132 };
4133 }
4134};
4135// export the public type for h/tsx inference
4136// also to avoid inline import() in generated d.ts files
4137const KeepAlive = KeepAliveImpl;
4138function matches(pattern, name) {
4139 if (isArray(pattern)) {
4140 return pattern.some((p) => matches(p, name));
4141 }
4142 else if (isString(pattern)) {
4143 return pattern.split(',').includes(name);
4144 }
4145 else if (isRegExp(pattern)) {
4146 return pattern.test(name);
4147 }
4148 /* istanbul ignore next */
4149 return false;
4150}
4151function onActivated(hook, target) {
4152 registerKeepAliveHook(hook, "a" /* LifecycleHooks.ACTIVATED */, target);
4153}
4154function onDeactivated(hook, target) {
4155 registerKeepAliveHook(hook, "da" /* LifecycleHooks.DEACTIVATED */, target);
4156}
4157function registerKeepAliveHook(hook, type, target = currentInstance) {
4158 // cache the deactivate branch check wrapper for injected hooks so the same
4159 // hook can be properly deduped by the scheduler. "__wdc" stands for "with
4160 // deactivation check".
4161 const wrappedHook = hook.__wdc ||
4162 (hook.__wdc = () => {
4163 // only fire the hook if the target instance is NOT in a deactivated branch.
4164 let current = target;
4165 while (current) {
4166 if (current.isDeactivated) {
4167 return;
4168 }
4169 current = current.parent;
4170 }
4171 return hook();
4172 });
4173 injectHook(type, wrappedHook, target);
4174 // In addition to registering it on the target instance, we walk up the parent
4175 // chain and register it on all ancestor instances that are keep-alive roots.
4176 // This avoids the need to walk the entire component tree when invoking these
4177 // hooks, and more importantly, avoids the need to track child components in
4178 // arrays.
4179 if (target) {
4180 let current = target.parent;
4181 while (current && current.parent) {
4182 if (isKeepAlive(current.parent.vnode)) {
4183 injectToKeepAliveRoot(wrappedHook, type, target, current);
4184 }
4185 current = current.parent;
4186 }
4187 }
4188}
4189function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {
4190 // injectHook wraps the original for error handling, so make sure to remove
4191 // the wrapped version.
4192 const injected = injectHook(type, hook, keepAliveRoot, true /* prepend */);
4193 onUnmounted(() => {
4194 remove(keepAliveRoot[type], injected);
4195 }, target);
4196}
4197function resetShapeFlag(vnode) {
4198 // bitwise operations to remove keep alive flags
4199 vnode.shapeFlag &= ~256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
4200 vnode.shapeFlag &= ~512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
4201}
4202function getInnerChild(vnode) {
4203 return vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */ ? vnode.ssContent : vnode;
4204}
4205
4206function injectHook(type, hook, target = currentInstance, prepend = false) {
4207 if (target) {
4208 const hooks = target[type] || (target[type] = []);
4209 // cache the error handling wrapper for injected hooks so the same hook
4210 // can be properly deduped by the scheduler. "__weh" stands for "with error
4211 // handling".
4212 const wrappedHook = hook.__weh ||
4213 (hook.__weh = (...args) => {
4214 if (target.isUnmounted) {
4215 return;
4216 }
4217 // disable tracking inside all lifecycle hooks
4218 // since they can potentially be called inside effects.
4219 pauseTracking();
4220 // Set currentInstance during hook invocation.
4221 // This assumes the hook does not synchronously trigger other hooks, which
4222 // can only be false when the user does something really funky.
4223 setCurrentInstance(target);
4224 const res = callWithAsyncErrorHandling(hook, target, type, args);
4225 unsetCurrentInstance();
4226 resetTracking();
4227 return res;
4228 });
4229 if (prepend) {
4230 hooks.unshift(wrappedHook);
4231 }
4232 else {
4233 hooks.push(wrappedHook);
4234 }
4235 return wrappedHook;
4236 }
4237 else {
4238 const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''));
4239 warn(`${apiName} is called when there is no active component instance to be ` +
4240 `associated with. ` +
4241 `Lifecycle injection APIs can only be used during execution of setup().` +
4242 (` If you are using async setup(), make sure to register lifecycle ` +
4243 `hooks before the first await statement.`
4244 ));
4245 }
4246}
4247const createHook = (lifecycle) => (hook, target = currentInstance) =>
4248// post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
4249(!isInSSRComponentSetup || lifecycle === "sp" /* LifecycleHooks.SERVER_PREFETCH */) &&
4250 injectHook(lifecycle, (...args) => hook(...args), target);
4251const onBeforeMount = createHook("bm" /* LifecycleHooks.BEFORE_MOUNT */);
4252const onMounted = createHook("m" /* LifecycleHooks.MOUNTED */);
4253const onBeforeUpdate = createHook("bu" /* LifecycleHooks.BEFORE_UPDATE */);
4254const onUpdated = createHook("u" /* LifecycleHooks.UPDATED */);
4255const onBeforeUnmount = createHook("bum" /* LifecycleHooks.BEFORE_UNMOUNT */);
4256const onUnmounted = createHook("um" /* LifecycleHooks.UNMOUNTED */);
4257const onServerPrefetch = createHook("sp" /* LifecycleHooks.SERVER_PREFETCH */);
4258const onRenderTriggered = createHook("rtg" /* LifecycleHooks.RENDER_TRIGGERED */);
4259const onRenderTracked = createHook("rtc" /* LifecycleHooks.RENDER_TRACKED */);
4260function onErrorCaptured(hook, target = currentInstance) {
4261 injectHook("ec" /* LifecycleHooks.ERROR_CAPTURED */, hook, target);
4262}
4263
4264/**
4265Runtime helper for applying directives to a vnode. Example usage:
4266
4267const comp = resolveComponent('comp')
4268const foo = resolveDirective('foo')
4269const bar = resolveDirective('bar')
4270
4271return withDirectives(h(comp), [
4272 [foo, this.x],
4273 [bar, this.y]
4274])
4275*/
4276function validateDirectiveName(name) {
4277 if (isBuiltInDirective(name)) {
4278 warn('Do not use built-in directive ids as custom directive id: ' + name);
4279 }
4280}
4281/**
4282 * Adds directives to a VNode.
4283 */
4284function withDirectives(vnode, directives) {
4285 const internalInstance = currentRenderingInstance;
4286 if (internalInstance === null) {
4287 warn(`withDirectives can only be used inside render functions.`);
4288 return vnode;
4289 }
4290 const instance = getExposeProxy(internalInstance) ||
4291 internalInstance.proxy;
4292 const bindings = vnode.dirs || (vnode.dirs = []);
4293 for (let i = 0; i < directives.length; i++) {
4294 let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i];
4295 if (dir) {
4296 if (isFunction(dir)) {
4297 dir = {
4298 mounted: dir,
4299 updated: dir
4300 };
4301 }
4302 if (dir.deep) {
4303 traverse(value);
4304 }
4305 bindings.push({
4306 dir,
4307 instance,
4308 value,
4309 oldValue: void 0,
4310 arg,
4311 modifiers
4312 });
4313 }
4314 }
4315 return vnode;
4316}
4317function invokeDirectiveHook(vnode, prevVNode, instance, name) {
4318 const bindings = vnode.dirs;
4319 const oldBindings = prevVNode && prevVNode.dirs;
4320 for (let i = 0; i < bindings.length; i++) {
4321 const binding = bindings[i];
4322 if (oldBindings) {
4323 binding.oldValue = oldBindings[i].value;
4324 }
4325 let hook = binding.dir[name];
4326 if (hook) {
4327 // disable tracking inside all lifecycle hooks
4328 // since they can potentially be called inside effects.
4329 pauseTracking();
4330 callWithAsyncErrorHandling(hook, instance, 8 /* ErrorCodes.DIRECTIVE_HOOK */, [
4331 vnode.el,
4332 binding,
4333 vnode,
4334 prevVNode
4335 ]);
4336 resetTracking();
4337 }
4338 }
4339}
4340
4341const COMPONENTS = 'components';
4342const DIRECTIVES = 'directives';
4343/**
4344 * @private
4345 */
4346function resolveComponent(name, maybeSelfReference) {
4347 return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
4348}
4349const NULL_DYNAMIC_COMPONENT = Symbol();
4350/**
4351 * @private
4352 */
4353function resolveDynamicComponent(component) {
4354 if (isString(component)) {
4355 return resolveAsset(COMPONENTS, component, false) || component;
4356 }
4357 else {
4358 // invalid types will fallthrough to createVNode and raise warning
4359 return (component || NULL_DYNAMIC_COMPONENT);
4360 }
4361}
4362/**
4363 * @private
4364 */
4365function resolveDirective(name) {
4366 return resolveAsset(DIRECTIVES, name);
4367}
4368// implementation
4369function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
4370 const instance = currentRenderingInstance || currentInstance;
4371 if (instance) {
4372 const Component = instance.type;
4373 // explicit self name has highest priority
4374 if (type === COMPONENTS) {
4375 const selfName = getComponentName(Component, false /* do not include inferred name to avoid breaking existing code */);
4376 if (selfName &&
4377 (selfName === name ||
4378 selfName === camelize(name) ||
4379 selfName === capitalize(camelize(name)))) {
4380 return Component;
4381 }
4382 }
4383 const res =
4384 // local registration
4385 // check instance[type] first which is resolved for options API
4386 resolve(instance[type] || Component[type], name) ||
4387 // global registration
4388 resolve(instance.appContext[type], name);
4389 if (!res && maybeSelfReference) {
4390 // fallback to implicit self-reference
4391 return Component;
4392 }
4393 if (warnMissing && !res) {
4394 const extra = type === COMPONENTS
4395 ? `\nIf this is a native custom element, make sure to exclude it from ` +
4396 `component resolution via compilerOptions.isCustomElement.`
4397 : ``;
4398 warn(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
4399 }
4400 return res;
4401 }
4402 else {
4403 warn(`resolve${capitalize(type.slice(0, -1))} ` +
4404 `can only be used in render() or setup().`);
4405 }
4406}
4407function resolve(registry, name) {
4408 return (registry &&
4409 (registry[name] ||
4410 registry[camelize(name)] ||
4411 registry[capitalize(camelize(name))]));
4412}
4413
4414/**
4415 * Actual implementation
4416 */
4417function renderList(source, renderItem, cache, index) {
4418 let ret;
4419 const cached = (cache && cache[index]);
4420 if (isArray(source) || isString(source)) {
4421 ret = new Array(source.length);
4422 for (let i = 0, l = source.length; i < l; i++) {
4423 ret[i] = renderItem(source[i], i, undefined, cached && cached[i]);
4424 }
4425 }
4426 else if (typeof source === 'number') {
4427 if (!Number.isInteger(source)) {
4428 warn(`The v-for range expect an integer value but got ${source}.`);
4429 }
4430 ret = new Array(source);
4431 for (let i = 0; i < source; i++) {
4432 ret[i] = renderItem(i + 1, i, undefined, cached && cached[i]);
4433 }
4434 }
4435 else if (isObject(source)) {
4436 if (source[Symbol.iterator]) {
4437 ret = Array.from(source, (item, i) => renderItem(item, i, undefined, cached && cached[i]));
4438 }
4439 else {
4440 const keys = Object.keys(source);
4441 ret = new Array(keys.length);
4442 for (let i = 0, l = keys.length; i < l; i++) {
4443 const key = keys[i];
4444 ret[i] = renderItem(source[key], key, i, cached && cached[i]);
4445 }
4446 }
4447 }
4448 else {
4449 ret = [];
4450 }
4451 if (cache) {
4452 cache[index] = ret;
4453 }
4454 return ret;
4455}
4456
4457/**
4458 * Compiler runtime helper for creating dynamic slots object
4459 * @private
4460 */
4461function createSlots(slots, dynamicSlots) {
4462 for (let i = 0; i < dynamicSlots.length; i++) {
4463 const slot = dynamicSlots[i];
4464 // array of dynamic slot generated by <template v-for="..." #[...]>
4465 if (isArray(slot)) {
4466 for (let j = 0; j < slot.length; j++) {
4467 slots[slot[j].name] = slot[j].fn;
4468 }
4469 }
4470 else if (slot) {
4471 // conditional single slot generated by <template v-if="..." #foo>
4472 slots[slot.name] = slot.key
4473 ? (...args) => {
4474 const res = slot.fn(...args);
4475 // attach branch key so each conditional branch is considered a
4476 // different fragment
4477 if (res)
4478 res.key = slot.key;
4479 return res;
4480 }
4481 : slot.fn;
4482 }
4483 }
4484 return slots;
4485}
4486
4487/**
4488 * Compiler runtime helper for rendering `<slot/>`
4489 * @private
4490 */
4491function renderSlot(slots, name, props = {},
4492// this is not a user-facing function, so the fallback is always generated by
4493// the compiler and guaranteed to be a function returning an array
4494fallback, noSlotted) {
4495 if (currentRenderingInstance.isCE ||
4496 (currentRenderingInstance.parent &&
4497 isAsyncWrapper(currentRenderingInstance.parent) &&
4498 currentRenderingInstance.parent.isCE)) {
4499 if (name !== 'default')
4500 props.name = name;
4501 return createVNode('slot', props, fallback && fallback());
4502 }
4503 let slot = slots[name];
4504 if (slot && slot.length > 1) {
4505 warn(`SSR-optimized slot function detected in a non-SSR-optimized render ` +
4506 `function. You need to mark this component with $dynamic-slots in the ` +
4507 `parent template.`);
4508 slot = () => [];
4509 }
4510 // a compiled slot disables block tracking by default to avoid manual
4511 // invocation interfering with template-based block tracking, but in
4512 // `renderSlot` we can be sure that it's template-based so we can force
4513 // enable it.
4514 if (slot && slot._c) {
4515 slot._d = false;
4516 }
4517 openBlock();
4518 const validSlotContent = slot && ensureValidVNode(slot(props));
4519 const rendered = createBlock(Fragment, {
4520 key: props.key ||
4521 // slot content array of a dynamic conditional slot may have a branch
4522 // key attached in the `createSlots` helper, respect that
4523 (validSlotContent && validSlotContent.key) ||
4524 `_${name}`
4525 }, validSlotContent || (fallback ? fallback() : []), validSlotContent && slots._ === 1 /* SlotFlags.STABLE */
4526 ? 64 /* PatchFlags.STABLE_FRAGMENT */
4527 : -2 /* PatchFlags.BAIL */);
4528 if (!noSlotted && rendered.scopeId) {
4529 rendered.slotScopeIds = [rendered.scopeId + '-s'];
4530 }
4531 if (slot && slot._c) {
4532 slot._d = true;
4533 }
4534 return rendered;
4535}
4536function ensureValidVNode(vnodes) {
4537 return vnodes.some(child => {
4538 if (!isVNode(child))
4539 return true;
4540 if (child.type === Comment)
4541 return false;
4542 if (child.type === Fragment &&
4543 !ensureValidVNode(child.children))
4544 return false;
4545 return true;
4546 })
4547 ? vnodes
4548 : null;
4549}
4550
4551/**
4552 * For prefixing keys in v-on="obj" with "on"
4553 * @private
4554 */
4555function toHandlers(obj, preserveCaseIfNecessary) {
4556 const ret = {};
4557 if (!isObject(obj)) {
4558 warn(`v-on with no argument expects an object value.`);
4559 return ret;
4560 }
4561 for (const key in obj) {
4562 ret[preserveCaseIfNecessary && /[A-Z]/.test(key)
4563 ? `on:${key}`
4564 : toHandlerKey(key)] = obj[key];
4565 }
4566 return ret;
4567}
4568
4569/**
4570 * #2437 In Vue 3, functional components do not have a public instance proxy but
4571 * they exist in the internal parent chain. For code that relies on traversing
4572 * public $parent chains, skip functional ones and go to the parent instead.
4573 */
4574const getPublicInstance = (i) => {
4575 if (!i)
4576 return null;
4577 if (isStatefulComponent(i))
4578 return getExposeProxy(i) || i.proxy;
4579 return getPublicInstance(i.parent);
4580};
4581const publicPropertiesMap =
4582// Move PURE marker to new line to workaround compiler discarding it
4583// due to type annotation
4584/*#__PURE__*/ extend(Object.create(null), {
4585 $: i => i,
4586 $el: i => i.vnode.el,
4587 $data: i => i.data,
4588 $props: i => (shallowReadonly(i.props) ),
4589 $attrs: i => (shallowReadonly(i.attrs) ),
4590 $slots: i => (shallowReadonly(i.slots) ),
4591 $refs: i => (shallowReadonly(i.refs) ),
4592 $parent: i => getPublicInstance(i.parent),
4593 $root: i => getPublicInstance(i.root),
4594 $emit: i => i.emit,
4595 $options: i => (resolveMergedOptions(i) ),
4596 $forceUpdate: i => i.f || (i.f = () => queueJob(i.update)),
4597 $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy)),
4598 $watch: i => (instanceWatch.bind(i) )
4599});
4600const isReservedPrefix = (key) => key === '_' || key === '$';
4601const hasSetupBinding = (state, key) => state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key);
4602const PublicInstanceProxyHandlers = {
4603 get({ _: instance }, key) {
4604 const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
4605 // for internal formatters to know that this is a Vue instance
4606 if (key === '__isVue') {
4607 return true;
4608 }
4609 // data / props / ctx
4610 // This getter gets called for every property access on the render context
4611 // during render and is a major hotspot. The most expensive part of this
4612 // is the multiple hasOwn() calls. It's much faster to do a simple property
4613 // access on a plain object, so we use an accessCache object (with null
4614 // prototype) to memoize what access type a key corresponds to.
4615 let normalizedProps;
4616 if (key[0] !== '$') {
4617 const n = accessCache[key];
4618 if (n !== undefined) {
4619 switch (n) {
4620 case 1 /* AccessTypes.SETUP */:
4621 return setupState[key];
4622 case 2 /* AccessTypes.DATA */:
4623 return data[key];
4624 case 4 /* AccessTypes.CONTEXT */:
4625 return ctx[key];
4626 case 3 /* AccessTypes.PROPS */:
4627 return props[key];
4628 // default: just fallthrough
4629 }
4630 }
4631 else if (hasSetupBinding(setupState, key)) {
4632 accessCache[key] = 1 /* AccessTypes.SETUP */;
4633 return setupState[key];
4634 }
4635 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
4636 accessCache[key] = 2 /* AccessTypes.DATA */;
4637 return data[key];
4638 }
4639 else if (
4640 // only cache other properties when instance has declared (thus stable)
4641 // props
4642 (normalizedProps = instance.propsOptions[0]) &&
4643 hasOwn(normalizedProps, key)) {
4644 accessCache[key] = 3 /* AccessTypes.PROPS */;
4645 return props[key];
4646 }
4647 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
4648 accessCache[key] = 4 /* AccessTypes.CONTEXT */;
4649 return ctx[key];
4650 }
4651 else if (shouldCacheAccess) {
4652 accessCache[key] = 0 /* AccessTypes.OTHER */;
4653 }
4654 }
4655 const publicGetter = publicPropertiesMap[key];
4656 let cssModule, globalProperties;
4657 // public $xxx properties
4658 if (publicGetter) {
4659 if (key === '$attrs') {
4660 track(instance, "get" /* TrackOpTypes.GET */, key);
4661 markAttrsAccessed();
4662 }
4663 return publicGetter(instance);
4664 }
4665 else if (
4666 // css module (injected by vue-loader)
4667 (cssModule = type.__cssModules) &&
4668 (cssModule = cssModule[key])) {
4669 return cssModule;
4670 }
4671 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
4672 // user may set custom properties to `this` that start with `$`
4673 accessCache[key] = 4 /* AccessTypes.CONTEXT */;
4674 return ctx[key];
4675 }
4676 else if (
4677 // global properties
4678 ((globalProperties = appContext.config.globalProperties),
4679 hasOwn(globalProperties, key))) {
4680 {
4681 return globalProperties[key];
4682 }
4683 }
4684 else if (currentRenderingInstance &&
4685 (!isString(key) ||
4686 // #1091 avoid internal isRef/isVNode checks on component instance leading
4687 // to infinite warning loop
4688 key.indexOf('__v') !== 0)) {
4689 if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
4690 warn(`Property ${JSON.stringify(key)} must be accessed via $data because it starts with a reserved ` +
4691 `character ("$" or "_") and is not proxied on the render context.`);
4692 }
4693 else if (instance === currentRenderingInstance) {
4694 warn(`Property ${JSON.stringify(key)} was accessed during render ` +
4695 `but is not defined on instance.`);
4696 }
4697 }
4698 },
4699 set({ _: instance }, key, value) {
4700 const { data, setupState, ctx } = instance;
4701 if (hasSetupBinding(setupState, key)) {
4702 setupState[key] = value;
4703 return true;
4704 }
4705 else if (setupState.__isScriptSetup &&
4706 hasOwn(setupState, key)) {
4707 warn(`Cannot mutate <script setup> binding "${key}" from Options API.`);
4708 return false;
4709 }
4710 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
4711 data[key] = value;
4712 return true;
4713 }
4714 else if (hasOwn(instance.props, key)) {
4715 warn(`Attempting to mutate prop "${key}". Props are readonly.`);
4716 return false;
4717 }
4718 if (key[0] === '$' && key.slice(1) in instance) {
4719 warn(`Attempting to mutate public property "${key}". ` +
4720 `Properties starting with $ are reserved and readonly.`);
4721 return false;
4722 }
4723 else {
4724 if (key in instance.appContext.config.globalProperties) {
4725 Object.defineProperty(ctx, key, {
4726 enumerable: true,
4727 configurable: true,
4728 value
4729 });
4730 }
4731 else {
4732 ctx[key] = value;
4733 }
4734 }
4735 return true;
4736 },
4737 has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) {
4738 let normalizedProps;
4739 return (!!accessCache[key] ||
4740 (data !== EMPTY_OBJ && hasOwn(data, key)) ||
4741 hasSetupBinding(setupState, key) ||
4742 ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
4743 hasOwn(ctx, key) ||
4744 hasOwn(publicPropertiesMap, key) ||
4745 hasOwn(appContext.config.globalProperties, key));
4746 },
4747 defineProperty(target, key, descriptor) {
4748 if (descriptor.get != null) {
4749 // invalidate key cache of a getter based property #5417
4750 target._.accessCache[key] = 0;
4751 }
4752 else if (hasOwn(descriptor, 'value')) {
4753 this.set(target, key, descriptor.value, null);
4754 }
4755 return Reflect.defineProperty(target, key, descriptor);
4756 }
4757};
4758{
4759 PublicInstanceProxyHandlers.ownKeys = (target) => {
4760 warn(`Avoid app logic that relies on enumerating keys on a component instance. ` +
4761 `The keys will be empty in production mode to avoid performance overhead.`);
4762 return Reflect.ownKeys(target);
4763 };
4764}
4765const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ extend({}, PublicInstanceProxyHandlers, {
4766 get(target, key) {
4767 // fast path for unscopables when using `with` block
4768 if (key === Symbol.unscopables) {
4769 return;
4770 }
4771 return PublicInstanceProxyHandlers.get(target, key, target);
4772 },
4773 has(_, key) {
4774 const has = key[0] !== '_' && !isGloballyWhitelisted(key);
4775 if (!has && PublicInstanceProxyHandlers.has(_, key)) {
4776 warn(`Property ${JSON.stringify(key)} should not start with _ which is a reserved prefix for Vue internals.`);
4777 }
4778 return has;
4779 }
4780});
4781// dev only
4782// In dev mode, the proxy target exposes the same properties as seen on `this`
4783// for easier console inspection. In prod mode it will be an empty object so
4784// these properties definitions can be skipped.
4785function createDevRenderContext(instance) {
4786 const target = {};
4787 // expose internal instance for proxy handlers
4788 Object.defineProperty(target, `_`, {
4789 configurable: true,
4790 enumerable: false,
4791 get: () => instance
4792 });
4793 // expose public properties
4794 Object.keys(publicPropertiesMap).forEach(key => {
4795 Object.defineProperty(target, key, {
4796 configurable: true,
4797 enumerable: false,
4798 get: () => publicPropertiesMap[key](instance),
4799 // intercepted by the proxy so no need for implementation,
4800 // but needed to prevent set errors
4801 set: NOOP
4802 });
4803 });
4804 return target;
4805}
4806// dev only
4807function exposePropsOnRenderContext(instance) {
4808 const { ctx, propsOptions: [propsOptions] } = instance;
4809 if (propsOptions) {
4810 Object.keys(propsOptions).forEach(key => {
4811 Object.defineProperty(ctx, key, {
4812 enumerable: true,
4813 configurable: true,
4814 get: () => instance.props[key],
4815 set: NOOP
4816 });
4817 });
4818 }
4819}
4820// dev only
4821function exposeSetupStateOnRenderContext(instance) {
4822 const { ctx, setupState } = instance;
4823 Object.keys(toRaw(setupState)).forEach(key => {
4824 if (!setupState.__isScriptSetup) {
4825 if (isReservedPrefix(key[0])) {
4826 warn(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
4827 `which are reserved prefixes for Vue internals.`);
4828 return;
4829 }
4830 Object.defineProperty(ctx, key, {
4831 enumerable: true,
4832 configurable: true,
4833 get: () => setupState[key],
4834 set: NOOP
4835 });
4836 }
4837 });
4838}
4839
4840function createDuplicateChecker() {
4841 const cache = Object.create(null);
4842 return (type, key) => {
4843 if (cache[key]) {
4844 warn(`${type} property "${key}" is already defined in ${cache[key]}.`);
4845 }
4846 else {
4847 cache[key] = type;
4848 }
4849 };
4850}
4851let shouldCacheAccess = true;
4852function applyOptions(instance) {
4853 const options = resolveMergedOptions(instance);
4854 const publicThis = instance.proxy;
4855 const ctx = instance.ctx;
4856 // do not cache property access on public proxy during state initialization
4857 shouldCacheAccess = false;
4858 // call beforeCreate first before accessing other options since
4859 // the hook may mutate resolved options (#2791)
4860 if (options.beforeCreate) {
4861 callHook$1(options.beforeCreate, instance, "bc" /* LifecycleHooks.BEFORE_CREATE */);
4862 }
4863 const {
4864 // state
4865 data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions,
4866 // lifecycle
4867 created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, render, renderTracked, renderTriggered, errorCaptured, serverPrefetch,
4868 // public API
4869 expose, inheritAttrs,
4870 // assets
4871 components, directives, filters } = options;
4872 const checkDuplicateProperties = createDuplicateChecker() ;
4873 {
4874 const [propsOptions] = instance.propsOptions;
4875 if (propsOptions) {
4876 for (const key in propsOptions) {
4877 checkDuplicateProperties("Props" /* OptionTypes.PROPS */, key);
4878 }
4879 }
4880 }
4881 // options initialization order (to be consistent with Vue 2):
4882 // - props (already done outside of this function)
4883 // - inject
4884 // - methods
4885 // - data (deferred since it relies on `this` access)
4886 // - computed
4887 // - watch (deferred since it relies on `this` access)
4888 if (injectOptions) {
4889 resolveInjections(injectOptions, ctx, checkDuplicateProperties, instance.appContext.config.unwrapInjectedRef);
4890 }
4891 if (methods) {
4892 for (const key in methods) {
4893 const methodHandler = methods[key];
4894 if (isFunction(methodHandler)) {
4895 // In dev mode, we use the `createRenderContext` function to define
4896 // methods to the proxy target, and those are read-only but
4897 // reconfigurable, so it needs to be redefined here
4898 {
4899 Object.defineProperty(ctx, key, {
4900 value: methodHandler.bind(publicThis),
4901 configurable: true,
4902 enumerable: true,
4903 writable: true
4904 });
4905 }
4906 {
4907 checkDuplicateProperties("Methods" /* OptionTypes.METHODS */, key);
4908 }
4909 }
4910 else {
4911 warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
4912 `Did you reference the function correctly?`);
4913 }
4914 }
4915 }
4916 if (dataOptions) {
4917 if (!isFunction(dataOptions)) {
4918 warn(`The data option must be a function. ` +
4919 `Plain object usage is no longer supported.`);
4920 }
4921 const data = dataOptions.call(publicThis, publicThis);
4922 if (isPromise(data)) {
4923 warn(`data() returned a Promise - note data() cannot be async; If you ` +
4924 `intend to perform data fetching before component renders, use ` +
4925 `async setup() + <Suspense>.`);
4926 }
4927 if (!isObject(data)) {
4928 warn(`data() should return an object.`);
4929 }
4930 else {
4931 instance.data = reactive(data);
4932 {
4933 for (const key in data) {
4934 checkDuplicateProperties("Data" /* OptionTypes.DATA */, key);
4935 // expose data on ctx during dev
4936 if (!isReservedPrefix(key[0])) {
4937 Object.defineProperty(ctx, key, {
4938 configurable: true,
4939 enumerable: true,
4940 get: () => data[key],
4941 set: NOOP
4942 });
4943 }
4944 }
4945 }
4946 }
4947 }
4948 // state initialization complete at this point - start caching access
4949 shouldCacheAccess = true;
4950 if (computedOptions) {
4951 for (const key in computedOptions) {
4952 const opt = computedOptions[key];
4953 const get = isFunction(opt)
4954 ? opt.bind(publicThis, publicThis)
4955 : isFunction(opt.get)
4956 ? opt.get.bind(publicThis, publicThis)
4957 : NOOP;
4958 if (get === NOOP) {
4959 warn(`Computed property "${key}" has no getter.`);
4960 }
4961 const set = !isFunction(opt) && isFunction(opt.set)
4962 ? opt.set.bind(publicThis)
4963 : () => {
4964 warn(`Write operation failed: computed property "${key}" is readonly.`);
4965 }
4966 ;
4967 const c = computed({
4968 get,
4969 set
4970 });
4971 Object.defineProperty(ctx, key, {
4972 enumerable: true,
4973 configurable: true,
4974 get: () => c.value,
4975 set: v => (c.value = v)
4976 });
4977 {
4978 checkDuplicateProperties("Computed" /* OptionTypes.COMPUTED */, key);
4979 }
4980 }
4981 }
4982 if (watchOptions) {
4983 for (const key in watchOptions) {
4984 createWatcher(watchOptions[key], ctx, publicThis, key);
4985 }
4986 }
4987 if (provideOptions) {
4988 const provides = isFunction(provideOptions)
4989 ? provideOptions.call(publicThis)
4990 : provideOptions;
4991 Reflect.ownKeys(provides).forEach(key => {
4992 provide(key, provides[key]);
4993 });
4994 }
4995 if (created) {
4996 callHook$1(created, instance, "c" /* LifecycleHooks.CREATED */);
4997 }
4998 function registerLifecycleHook(register, hook) {
4999 if (isArray(hook)) {
5000 hook.forEach(_hook => register(_hook.bind(publicThis)));
5001 }
5002 else if (hook) {
5003 register(hook.bind(publicThis));
5004 }
5005 }
5006 registerLifecycleHook(onBeforeMount, beforeMount);
5007 registerLifecycleHook(onMounted, mounted);
5008 registerLifecycleHook(onBeforeUpdate, beforeUpdate);
5009 registerLifecycleHook(onUpdated, updated);
5010 registerLifecycleHook(onActivated, activated);
5011 registerLifecycleHook(onDeactivated, deactivated);
5012 registerLifecycleHook(onErrorCaptured, errorCaptured);
5013 registerLifecycleHook(onRenderTracked, renderTracked);
5014 registerLifecycleHook(onRenderTriggered, renderTriggered);
5015 registerLifecycleHook(onBeforeUnmount, beforeUnmount);
5016 registerLifecycleHook(onUnmounted, unmounted);
5017 registerLifecycleHook(onServerPrefetch, serverPrefetch);
5018 if (isArray(expose)) {
5019 if (expose.length) {
5020 const exposed = instance.exposed || (instance.exposed = {});
5021 expose.forEach(key => {
5022 Object.defineProperty(exposed, key, {
5023 get: () => publicThis[key],
5024 set: val => (publicThis[key] = val)
5025 });
5026 });
5027 }
5028 else if (!instance.exposed) {
5029 instance.exposed = {};
5030 }
5031 }
5032 // options that are handled when creating the instance but also need to be
5033 // applied from mixins
5034 if (render && instance.render === NOOP) {
5035 instance.render = render;
5036 }
5037 if (inheritAttrs != null) {
5038 instance.inheritAttrs = inheritAttrs;
5039 }
5040 // asset options.
5041 if (components)
5042 instance.components = components;
5043 if (directives)
5044 instance.directives = directives;
5045}
5046function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP, unwrapRef = false) {
5047 if (isArray(injectOptions)) {
5048 injectOptions = normalizeInject(injectOptions);
5049 }
5050 for (const key in injectOptions) {
5051 const opt = injectOptions[key];
5052 let injected;
5053 if (isObject(opt)) {
5054 if ('default' in opt) {
5055 injected = inject(opt.from || key, opt.default, true /* treat default function as factory */);
5056 }
5057 else {
5058 injected = inject(opt.from || key);
5059 }
5060 }
5061 else {
5062 injected = inject(opt);
5063 }
5064 if (isRef(injected)) {
5065 // TODO remove the check in 3.3
5066 if (unwrapRef) {
5067 Object.defineProperty(ctx, key, {
5068 enumerable: true,
5069 configurable: true,
5070 get: () => injected.value,
5071 set: v => (injected.value = v)
5072 });
5073 }
5074 else {
5075 {
5076 warn(`injected property "${key}" is a ref and will be auto-unwrapped ` +
5077 `and no longer needs \`.value\` in the next minor release. ` +
5078 `To opt-in to the new behavior now, ` +
5079 `set \`app.config.unwrapInjectedRef = true\` (this config is ` +
5080 `temporary and will not be needed in the future.)`);
5081 }
5082 ctx[key] = injected;
5083 }
5084 }
5085 else {
5086 ctx[key] = injected;
5087 }
5088 {
5089 checkDuplicateProperties("Inject" /* OptionTypes.INJECT */, key);
5090 }
5091 }
5092}
5093function callHook$1(hook, instance, type) {
5094 callWithAsyncErrorHandling(isArray(hook)
5095 ? hook.map(h => h.bind(instance.proxy))
5096 : hook.bind(instance.proxy), instance, type);
5097}
5098function createWatcher(raw, ctx, publicThis, key) {
5099 const getter = key.includes('.')
5100 ? createPathGetter(publicThis, key)
5101 : () => publicThis[key];
5102 if (isString(raw)) {
5103 const handler = ctx[raw];
5104 if (isFunction(handler)) {
5105 watch(getter, handler);
5106 }
5107 else {
5108 warn(`Invalid watch handler specified by key "${raw}"`, handler);
5109 }
5110 }
5111 else if (isFunction(raw)) {
5112 watch(getter, raw.bind(publicThis));
5113 }
5114 else if (isObject(raw)) {
5115 if (isArray(raw)) {
5116 raw.forEach(r => createWatcher(r, ctx, publicThis, key));
5117 }
5118 else {
5119 const handler = isFunction(raw.handler)
5120 ? raw.handler.bind(publicThis)
5121 : ctx[raw.handler];
5122 if (isFunction(handler)) {
5123 watch(getter, handler, raw);
5124 }
5125 else {
5126 warn(`Invalid watch handler specified by key "${raw.handler}"`, handler);
5127 }
5128 }
5129 }
5130 else {
5131 warn(`Invalid watch option: "${key}"`, raw);
5132 }
5133}
5134/**
5135 * Resolve merged options and cache it on the component.
5136 * This is done only once per-component since the merging does not involve
5137 * instances.
5138 */
5139function resolveMergedOptions(instance) {
5140 const base = instance.type;
5141 const { mixins, extends: extendsOptions } = base;
5142 const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext;
5143 const cached = cache.get(base);
5144 let resolved;
5145 if (cached) {
5146 resolved = cached;
5147 }
5148 else if (!globalMixins.length && !mixins && !extendsOptions) {
5149 {
5150 resolved = base;
5151 }
5152 }
5153 else {
5154 resolved = {};
5155 if (globalMixins.length) {
5156 globalMixins.forEach(m => mergeOptions(resolved, m, optionMergeStrategies, true));
5157 }
5158 mergeOptions(resolved, base, optionMergeStrategies);
5159 }
5160 if (isObject(base)) {
5161 cache.set(base, resolved);
5162 }
5163 return resolved;
5164}
5165function mergeOptions(to, from, strats, asMixin = false) {
5166 const { mixins, extends: extendsOptions } = from;
5167 if (extendsOptions) {
5168 mergeOptions(to, extendsOptions, strats, true);
5169 }
5170 if (mixins) {
5171 mixins.forEach((m) => mergeOptions(to, m, strats, true));
5172 }
5173 for (const key in from) {
5174 if (asMixin && key === 'expose') {
5175 warn(`"expose" option is ignored when declared in mixins or extends. ` +
5176 `It should only be declared in the base component itself.`);
5177 }
5178 else {
5179 const strat = internalOptionMergeStrats[key] || (strats && strats[key]);
5180 to[key] = strat ? strat(to[key], from[key]) : from[key];
5181 }
5182 }
5183 return to;
5184}
5185const internalOptionMergeStrats = {
5186 data: mergeDataFn,
5187 props: mergeObjectOptions,
5188 emits: mergeObjectOptions,
5189 // objects
5190 methods: mergeObjectOptions,
5191 computed: mergeObjectOptions,
5192 // lifecycle
5193 beforeCreate: mergeAsArray,
5194 created: mergeAsArray,
5195 beforeMount: mergeAsArray,
5196 mounted: mergeAsArray,
5197 beforeUpdate: mergeAsArray,
5198 updated: mergeAsArray,
5199 beforeDestroy: mergeAsArray,
5200 beforeUnmount: mergeAsArray,
5201 destroyed: mergeAsArray,
5202 unmounted: mergeAsArray,
5203 activated: mergeAsArray,
5204 deactivated: mergeAsArray,
5205 errorCaptured: mergeAsArray,
5206 serverPrefetch: mergeAsArray,
5207 // assets
5208 components: mergeObjectOptions,
5209 directives: mergeObjectOptions,
5210 // watch
5211 watch: mergeWatchOptions,
5212 // provide / inject
5213 provide: mergeDataFn,
5214 inject: mergeInject
5215};
5216function mergeDataFn(to, from) {
5217 if (!from) {
5218 return to;
5219 }
5220 if (!to) {
5221 return from;
5222 }
5223 return function mergedDataFn() {
5224 return (extend)(isFunction(to) ? to.call(this, this) : to, isFunction(from) ? from.call(this, this) : from);
5225 };
5226}
5227function mergeInject(to, from) {
5228 return mergeObjectOptions(normalizeInject(to), normalizeInject(from));
5229}
5230function normalizeInject(raw) {
5231 if (isArray(raw)) {
5232 const res = {};
5233 for (let i = 0; i < raw.length; i++) {
5234 res[raw[i]] = raw[i];
5235 }
5236 return res;
5237 }
5238 return raw;
5239}
5240function mergeAsArray(to, from) {
5241 return to ? [...new Set([].concat(to, from))] : from;
5242}
5243function mergeObjectOptions(to, from) {
5244 return to ? extend(extend(Object.create(null), to), from) : from;
5245}
5246function mergeWatchOptions(to, from) {
5247 if (!to)
5248 return from;
5249 if (!from)
5250 return to;
5251 const merged = extend(Object.create(null), to);
5252 for (const key in from) {
5253 merged[key] = mergeAsArray(to[key], from[key]);
5254 }
5255 return merged;
5256}
5257
5258function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison
5259isSSR = false) {
5260 const props = {};
5261 const attrs = {};
5262 def(attrs, InternalObjectKey, 1);
5263 instance.propsDefaults = Object.create(null);
5264 setFullProps(instance, rawProps, props, attrs);
5265 // ensure all declared prop keys are present
5266 for (const key in instance.propsOptions[0]) {
5267 if (!(key in props)) {
5268 props[key] = undefined;
5269 }
5270 }
5271 // validation
5272 {
5273 validateProps(rawProps || {}, props, instance);
5274 }
5275 if (isStateful) {
5276 // stateful
5277 instance.props = isSSR ? props : shallowReactive(props);
5278 }
5279 else {
5280 if (!instance.type.props) {
5281 // functional w/ optional props, props === attrs
5282 instance.props = attrs;
5283 }
5284 else {
5285 // functional w/ declared props
5286 instance.props = props;
5287 }
5288 }
5289 instance.attrs = attrs;
5290}
5291function isInHmrContext(instance) {
5292 while (instance) {
5293 if (instance.type.__hmrId)
5294 return true;
5295 instance = instance.parent;
5296 }
5297}
5298function updateProps(instance, rawProps, rawPrevProps, optimized) {
5299 const { props, attrs, vnode: { patchFlag } } = instance;
5300 const rawCurrentProps = toRaw(props);
5301 const [options] = instance.propsOptions;
5302 let hasAttrsChanged = false;
5303 if (
5304 // always force full diff in dev
5305 // - #1942 if hmr is enabled with sfc component
5306 // - vite#872 non-sfc component used by sfc component
5307 !(isInHmrContext(instance)) &&
5308 (optimized || patchFlag > 0) &&
5309 !(patchFlag & 16 /* PatchFlags.FULL_PROPS */)) {
5310 if (patchFlag & 8 /* PatchFlags.PROPS */) {
5311 // Compiler-generated props & no keys change, just set the updated
5312 // the props.
5313 const propsToUpdate = instance.vnode.dynamicProps;
5314 for (let i = 0; i < propsToUpdate.length; i++) {
5315 let key = propsToUpdate[i];
5316 // skip if the prop key is a declared emit event listener
5317 if (isEmitListener(instance.emitsOptions, key)) {
5318 continue;
5319 }
5320 // PROPS flag guarantees rawProps to be non-null
5321 const value = rawProps[key];
5322 if (options) {
5323 // attr / props separation was done on init and will be consistent
5324 // in this code path, so just check if attrs have it.
5325 if (hasOwn(attrs, key)) {
5326 if (value !== attrs[key]) {
5327 attrs[key] = value;
5328 hasAttrsChanged = true;
5329 }
5330 }
5331 else {
5332 const camelizedKey = camelize(key);
5333 props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance, false /* isAbsent */);
5334 }
5335 }
5336 else {
5337 if (value !== attrs[key]) {
5338 attrs[key] = value;
5339 hasAttrsChanged = true;
5340 }
5341 }
5342 }
5343 }
5344 }
5345 else {
5346 // full props update.
5347 if (setFullProps(instance, rawProps, props, attrs)) {
5348 hasAttrsChanged = true;
5349 }
5350 // in case of dynamic props, check if we need to delete keys from
5351 // the props object
5352 let kebabKey;
5353 for (const key in rawCurrentProps) {
5354 if (!rawProps ||
5355 // for camelCase
5356 (!hasOwn(rawProps, key) &&
5357 // it's possible the original props was passed in as kebab-case
5358 // and converted to camelCase (#955)
5359 ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))) {
5360 if (options) {
5361 if (rawPrevProps &&
5362 // for camelCase
5363 (rawPrevProps[key] !== undefined ||
5364 // for kebab-case
5365 rawPrevProps[kebabKey] !== undefined)) {
5366 props[key] = resolvePropValue(options, rawCurrentProps, key, undefined, instance, true /* isAbsent */);
5367 }
5368 }
5369 else {
5370 delete props[key];
5371 }
5372 }
5373 }
5374 // in the case of functional component w/o props declaration, props and
5375 // attrs point to the same object so it should already have been updated.
5376 if (attrs !== rawCurrentProps) {
5377 for (const key in attrs) {
5378 if (!rawProps ||
5379 (!hasOwn(rawProps, key) &&
5380 (!false ))) {
5381 delete attrs[key];
5382 hasAttrsChanged = true;
5383 }
5384 }
5385 }
5386 }
5387 // trigger updates for $attrs in case it's used in component slots
5388 if (hasAttrsChanged) {
5389 trigger(instance, "set" /* TriggerOpTypes.SET */, '$attrs');
5390 }
5391 {
5392 validateProps(rawProps || {}, props, instance);
5393 }
5394}
5395function setFullProps(instance, rawProps, props, attrs) {
5396 const [options, needCastKeys] = instance.propsOptions;
5397 let hasAttrsChanged = false;
5398 let rawCastValues;
5399 if (rawProps) {
5400 for (let key in rawProps) {
5401 // key, ref are reserved and never passed down
5402 if (isReservedProp(key)) {
5403 continue;
5404 }
5405 const value = rawProps[key];
5406 // prop option names are camelized during normalization, so to support
5407 // kebab -> camel conversion here we need to camelize the key.
5408 let camelKey;
5409 if (options && hasOwn(options, (camelKey = camelize(key)))) {
5410 if (!needCastKeys || !needCastKeys.includes(camelKey)) {
5411 props[camelKey] = value;
5412 }
5413 else {
5414 (rawCastValues || (rawCastValues = {}))[camelKey] = value;
5415 }
5416 }
5417 else if (!isEmitListener(instance.emitsOptions, key)) {
5418 if (!(key in attrs) || value !== attrs[key]) {
5419 attrs[key] = value;
5420 hasAttrsChanged = true;
5421 }
5422 }
5423 }
5424 }
5425 if (needCastKeys) {
5426 const rawCurrentProps = toRaw(props);
5427 const castValues = rawCastValues || EMPTY_OBJ;
5428 for (let i = 0; i < needCastKeys.length; i++) {
5429 const key = needCastKeys[i];
5430 props[key] = resolvePropValue(options, rawCurrentProps, key, castValues[key], instance, !hasOwn(castValues, key));
5431 }
5432 }
5433 return hasAttrsChanged;
5434}
5435function resolvePropValue(options, props, key, value, instance, isAbsent) {
5436 const opt = options[key];
5437 if (opt != null) {
5438 const hasDefault = hasOwn(opt, 'default');
5439 // default values
5440 if (hasDefault && value === undefined) {
5441 const defaultValue = opt.default;
5442 if (opt.type !== Function && isFunction(defaultValue)) {
5443 const { propsDefaults } = instance;
5444 if (key in propsDefaults) {
5445 value = propsDefaults[key];
5446 }
5447 else {
5448 setCurrentInstance(instance);
5449 value = propsDefaults[key] = defaultValue.call(null, props);
5450 unsetCurrentInstance();
5451 }
5452 }
5453 else {
5454 value = defaultValue;
5455 }
5456 }
5457 // boolean casting
5458 if (opt[0 /* BooleanFlags.shouldCast */]) {
5459 if (isAbsent && !hasDefault) {
5460 value = false;
5461 }
5462 else if (opt[1 /* BooleanFlags.shouldCastTrue */] &&
5463 (value === '' || value === hyphenate(key))) {
5464 value = true;
5465 }
5466 }
5467 }
5468 return value;
5469}
5470function normalizePropsOptions(comp, appContext, asMixin = false) {
5471 const cache = appContext.propsCache;
5472 const cached = cache.get(comp);
5473 if (cached) {
5474 return cached;
5475 }
5476 const raw = comp.props;
5477 const normalized = {};
5478 const needCastKeys = [];
5479 // apply mixin/extends props
5480 let hasExtends = false;
5481 if (!isFunction(comp)) {
5482 const extendProps = (raw) => {
5483 hasExtends = true;
5484 const [props, keys] = normalizePropsOptions(raw, appContext, true);
5485 extend(normalized, props);
5486 if (keys)
5487 needCastKeys.push(...keys);
5488 };
5489 if (!asMixin && appContext.mixins.length) {
5490 appContext.mixins.forEach(extendProps);
5491 }
5492 if (comp.extends) {
5493 extendProps(comp.extends);
5494 }
5495 if (comp.mixins) {
5496 comp.mixins.forEach(extendProps);
5497 }
5498 }
5499 if (!raw && !hasExtends) {
5500 if (isObject(comp)) {
5501 cache.set(comp, EMPTY_ARR);
5502 }
5503 return EMPTY_ARR;
5504 }
5505 if (isArray(raw)) {
5506 for (let i = 0; i < raw.length; i++) {
5507 if (!isString(raw[i])) {
5508 warn(`props must be strings when using array syntax.`, raw[i]);
5509 }
5510 const normalizedKey = camelize(raw[i]);
5511 if (validatePropName(normalizedKey)) {
5512 normalized[normalizedKey] = EMPTY_OBJ;
5513 }
5514 }
5515 }
5516 else if (raw) {
5517 if (!isObject(raw)) {
5518 warn(`invalid props options`, raw);
5519 }
5520 for (const key in raw) {
5521 const normalizedKey = camelize(key);
5522 if (validatePropName(normalizedKey)) {
5523 const opt = raw[key];
5524 const prop = (normalized[normalizedKey] =
5525 isArray(opt) || isFunction(opt) ? { type: opt } : Object.assign({}, opt));
5526 if (prop) {
5527 const booleanIndex = getTypeIndex(Boolean, prop.type);
5528 const stringIndex = getTypeIndex(String, prop.type);
5529 prop[0 /* BooleanFlags.shouldCast */] = booleanIndex > -1;
5530 prop[1 /* BooleanFlags.shouldCastTrue */] =
5531 stringIndex < 0 || booleanIndex < stringIndex;
5532 // if the prop needs boolean casting or default value
5533 if (booleanIndex > -1 || hasOwn(prop, 'default')) {
5534 needCastKeys.push(normalizedKey);
5535 }
5536 }
5537 }
5538 }
5539 }
5540 const res = [normalized, needCastKeys];
5541 if (isObject(comp)) {
5542 cache.set(comp, res);
5543 }
5544 return res;
5545}
5546function validatePropName(key) {
5547 if (key[0] !== '$') {
5548 return true;
5549 }
5550 else {
5551 warn(`Invalid prop name: "${key}" is a reserved property.`);
5552 }
5553 return false;
5554}
5555// use function string name to check type constructors
5556// so that it works across vms / iframes.
5557function getType(ctor) {
5558 const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/);
5559 return match ? match[2] : ctor === null ? 'null' : '';
5560}
5561function isSameType(a, b) {
5562 return getType(a) === getType(b);
5563}
5564function getTypeIndex(type, expectedTypes) {
5565 if (isArray(expectedTypes)) {
5566 return expectedTypes.findIndex(t => isSameType(t, type));
5567 }
5568 else if (isFunction(expectedTypes)) {
5569 return isSameType(expectedTypes, type) ? 0 : -1;
5570 }
5571 return -1;
5572}
5573/**
5574 * dev only
5575 */
5576function validateProps(rawProps, props, instance) {
5577 const resolvedValues = toRaw(props);
5578 const options = instance.propsOptions[0];
5579 for (const key in options) {
5580 let opt = options[key];
5581 if (opt == null)
5582 continue;
5583 validateProp(key, resolvedValues[key], opt, !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)));
5584 }
5585}
5586/**
5587 * dev only
5588 */
5589function validateProp(name, value, prop, isAbsent) {
5590 const { type, required, validator } = prop;
5591 // required!
5592 if (required && isAbsent) {
5593 warn('Missing required prop: "' + name + '"');
5594 return;
5595 }
5596 // missing but optional
5597 if (value == null && !prop.required) {
5598 return;
5599 }
5600 // type check
5601 if (type != null && type !== true) {
5602 let isValid = false;
5603 const types = isArray(type) ? type : [type];
5604 const expectedTypes = [];
5605 // value is valid as long as one of the specified types match
5606 for (let i = 0; i < types.length && !isValid; i++) {
5607 const { valid, expectedType } = assertType(value, types[i]);
5608 expectedTypes.push(expectedType || '');
5609 isValid = valid;
5610 }
5611 if (!isValid) {
5612 warn(getInvalidTypeMessage(name, value, expectedTypes));
5613 return;
5614 }
5615 }
5616 // custom validator
5617 if (validator && !validator(value)) {
5618 warn('Invalid prop: custom validator check failed for prop "' + name + '".');
5619 }
5620}
5621const isSimpleType = /*#__PURE__*/ makeMap('String,Number,Boolean,Function,Symbol,BigInt');
5622/**
5623 * dev only
5624 */
5625function assertType(value, type) {
5626 let valid;
5627 const expectedType = getType(type);
5628 if (isSimpleType(expectedType)) {
5629 const t = typeof value;
5630 valid = t === expectedType.toLowerCase();
5631 // for primitive wrapper objects
5632 if (!valid && t === 'object') {
5633 valid = value instanceof type;
5634 }
5635 }
5636 else if (expectedType === 'Object') {
5637 valid = isObject(value);
5638 }
5639 else if (expectedType === 'Array') {
5640 valid = isArray(value);
5641 }
5642 else if (expectedType === 'null') {
5643 valid = value === null;
5644 }
5645 else {
5646 valid = value instanceof type;
5647 }
5648 return {
5649 valid,
5650 expectedType
5651 };
5652}
5653/**
5654 * dev only
5655 */
5656function getInvalidTypeMessage(name, value, expectedTypes) {
5657 let message = `Invalid prop: type check failed for prop "${name}".` +
5658 ` Expected ${expectedTypes.map(capitalize).join(' | ')}`;
5659 const expectedType = expectedTypes[0];
5660 const receivedType = toRawType(value);
5661 const expectedValue = styleValue(value, expectedType);
5662 const receivedValue = styleValue(value, receivedType);
5663 // check if we need to specify expected value
5664 if (expectedTypes.length === 1 &&
5665 isExplicable(expectedType) &&
5666 !isBoolean(expectedType, receivedType)) {
5667 message += ` with value ${expectedValue}`;
5668 }
5669 message += `, got ${receivedType} `;
5670 // check if we need to specify received value
5671 if (isExplicable(receivedType)) {
5672 message += `with value ${receivedValue}.`;
5673 }
5674 return message;
5675}
5676/**
5677 * dev only
5678 */
5679function styleValue(value, type) {
5680 if (type === 'String') {
5681 return `"${value}"`;
5682 }
5683 else if (type === 'Number') {
5684 return `${Number(value)}`;
5685 }
5686 else {
5687 return `${value}`;
5688 }
5689}
5690/**
5691 * dev only
5692 */
5693function isExplicable(type) {
5694 const explicitTypes = ['string', 'number', 'boolean'];
5695 return explicitTypes.some(elem => type.toLowerCase() === elem);
5696}
5697/**
5698 * dev only
5699 */
5700function isBoolean(...args) {
5701 return args.some(elem => elem.toLowerCase() === 'boolean');
5702}
5703
5704const isInternalKey = (key) => key[0] === '_' || key === '$stable';
5705const normalizeSlotValue = (value) => isArray(value)
5706 ? value.map(normalizeVNode)
5707 : [normalizeVNode(value)];
5708const normalizeSlot = (key, rawSlot, ctx) => {
5709 if (rawSlot._n) {
5710 // already normalized - #5353
5711 return rawSlot;
5712 }
5713 const normalized = withCtx((...args) => {
5714 if (true && currentInstance) {
5715 warn(`Slot "${key}" invoked outside of the render function: ` +
5716 `this will not track dependencies used in the slot. ` +
5717 `Invoke the slot function inside the render function instead.`);
5718 }
5719 return normalizeSlotValue(rawSlot(...args));
5720 }, ctx);
5721 normalized._c = false;
5722 return normalized;
5723};
5724const normalizeObjectSlots = (rawSlots, slots, instance) => {
5725 const ctx = rawSlots._ctx;
5726 for (const key in rawSlots) {
5727 if (isInternalKey(key))
5728 continue;
5729 const value = rawSlots[key];
5730 if (isFunction(value)) {
5731 slots[key] = normalizeSlot(key, value, ctx);
5732 }
5733 else if (value != null) {
5734 {
5735 warn(`Non-function value encountered for slot "${key}". ` +
5736 `Prefer function slots for better performance.`);
5737 }
5738 const normalized = normalizeSlotValue(value);
5739 slots[key] = () => normalized;
5740 }
5741 }
5742};
5743const normalizeVNodeSlots = (instance, children) => {
5744 if (!isKeepAlive(instance.vnode) &&
5745 !(false )) {
5746 warn(`Non-function value encountered for default slot. ` +
5747 `Prefer function slots for better performance.`);
5748 }
5749 const normalized = normalizeSlotValue(children);
5750 instance.slots.default = () => normalized;
5751};
5752const initSlots = (instance, children) => {
5753 if (instance.vnode.shapeFlag & 32 /* ShapeFlags.SLOTS_CHILDREN */) {
5754 const type = children._;
5755 if (type) {
5756 // users can get the shallow readonly version of the slots object through `this.$slots`,
5757 // we should avoid the proxy object polluting the slots of the internal instance
5758 instance.slots = toRaw(children);
5759 // make compiler marker non-enumerable
5760 def(children, '_', type);
5761 }
5762 else {
5763 normalizeObjectSlots(children, (instance.slots = {}));
5764 }
5765 }
5766 else {
5767 instance.slots = {};
5768 if (children) {
5769 normalizeVNodeSlots(instance, children);
5770 }
5771 }
5772 def(instance.slots, InternalObjectKey, 1);
5773};
5774const updateSlots = (instance, children, optimized) => {
5775 const { vnode, slots } = instance;
5776 let needDeletionCheck = true;
5777 let deletionComparisonTarget = EMPTY_OBJ;
5778 if (vnode.shapeFlag & 32 /* ShapeFlags.SLOTS_CHILDREN */) {
5779 const type = children._;
5780 if (type) {
5781 // compiled slots.
5782 if (isHmrUpdating) {
5783 // Parent was HMR updated so slot content may have changed.
5784 // force update slots and mark instance for hmr as well
5785 extend(slots, children);
5786 }
5787 else if (optimized && type === 1 /* SlotFlags.STABLE */) {
5788 // compiled AND stable.
5789 // no need to update, and skip stale slots removal.
5790 needDeletionCheck = false;
5791 }
5792 else {
5793 // compiled but dynamic (v-if/v-for on slots) - update slots, but skip
5794 // normalization.
5795 extend(slots, children);
5796 // #2893
5797 // when rendering the optimized slots by manually written render function,
5798 // we need to delete the `slots._` flag if necessary to make subsequent updates reliable,
5799 // i.e. let the `renderSlot` create the bailed Fragment
5800 if (!optimized && type === 1 /* SlotFlags.STABLE */) {
5801 delete slots._;
5802 }
5803 }
5804 }
5805 else {
5806 needDeletionCheck = !children.$stable;
5807 normalizeObjectSlots(children, slots);
5808 }
5809 deletionComparisonTarget = children;
5810 }
5811 else if (children) {
5812 // non slot object children (direct value) passed to a component
5813 normalizeVNodeSlots(instance, children);
5814 deletionComparisonTarget = { default: 1 };
5815 }
5816 // delete stale slots
5817 if (needDeletionCheck) {
5818 for (const key in slots) {
5819 if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {
5820 delete slots[key];
5821 }
5822 }
5823 }
5824};
5825
5826function createAppContext() {
5827 return {
5828 app: null,
5829 config: {
5830 isNativeTag: NO,
5831 performance: false,
5832 globalProperties: {},
5833 optionMergeStrategies: {},
5834 errorHandler: undefined,
5835 warnHandler: undefined,
5836 compilerOptions: {}
5837 },
5838 mixins: [],
5839 components: {},
5840 directives: {},
5841 provides: Object.create(null),
5842 optionsCache: new WeakMap(),
5843 propsCache: new WeakMap(),
5844 emitsCache: new WeakMap()
5845 };
5846}
5847let uid$1 = 0;
5848function createAppAPI(render, hydrate) {
5849 return function createApp(rootComponent, rootProps = null) {
5850 if (!isFunction(rootComponent)) {
5851 rootComponent = Object.assign({}, rootComponent);
5852 }
5853 if (rootProps != null && !isObject(rootProps)) {
5854 warn(`root props passed to app.mount() must be an object.`);
5855 rootProps = null;
5856 }
5857 const context = createAppContext();
5858 const installedPlugins = new Set();
5859 let isMounted = false;
5860 const app = (context.app = {
5861 _uid: uid$1++,
5862 _component: rootComponent,
5863 _props: rootProps,
5864 _container: null,
5865 _context: context,
5866 _instance: null,
5867 version,
5868 get config() {
5869 return context.config;
5870 },
5871 set config(v) {
5872 {
5873 warn(`app.config cannot be replaced. Modify individual options instead.`);
5874 }
5875 },
5876 use(plugin, ...options) {
5877 if (installedPlugins.has(plugin)) {
5878 warn(`Plugin has already been applied to target app.`);
5879 }
5880 else if (plugin && isFunction(plugin.install)) {
5881 installedPlugins.add(plugin);
5882 plugin.install(app, ...options);
5883 }
5884 else if (isFunction(plugin)) {
5885 installedPlugins.add(plugin);
5886 plugin(app, ...options);
5887 }
5888 else {
5889 warn(`A plugin must either be a function or an object with an "install" ` +
5890 `function.`);
5891 }
5892 return app;
5893 },
5894 mixin(mixin) {
5895 {
5896 if (!context.mixins.includes(mixin)) {
5897 context.mixins.push(mixin);
5898 }
5899 else {
5900 warn('Mixin has already been applied to target app' +
5901 (mixin.name ? `: ${mixin.name}` : ''));
5902 }
5903 }
5904 return app;
5905 },
5906 component(name, component) {
5907 {
5908 validateComponentName(name, context.config);
5909 }
5910 if (!component) {
5911 return context.components[name];
5912 }
5913 if (context.components[name]) {
5914 warn(`Component "${name}" has already been registered in target app.`);
5915 }
5916 context.components[name] = component;
5917 return app;
5918 },
5919 directive(name, directive) {
5920 {
5921 validateDirectiveName(name);
5922 }
5923 if (!directive) {
5924 return context.directives[name];
5925 }
5926 if (context.directives[name]) {
5927 warn(`Directive "${name}" has already been registered in target app.`);
5928 }
5929 context.directives[name] = directive;
5930 return app;
5931 },
5932 mount(rootContainer, isHydrate, isSVG) {
5933 if (!isMounted) {
5934 // #5571
5935 if (rootContainer.__vue_app__) {
5936 warn(`There is already an app instance mounted on the host container.\n` +
5937 ` If you want to mount another app on the same host container,` +
5938 ` you need to unmount the previous app by calling \`app.unmount()\` first.`);
5939 }
5940 const vnode = createVNode(rootComponent, rootProps);
5941 // store app context on the root VNode.
5942 // this will be set on the root instance on initial mount.
5943 vnode.appContext = context;
5944 // HMR root reload
5945 {
5946 context.reload = () => {
5947 render(cloneVNode(vnode), rootContainer, isSVG);
5948 };
5949 }
5950 if (isHydrate && hydrate) {
5951 hydrate(vnode, rootContainer);
5952 }
5953 else {
5954 render(vnode, rootContainer, isSVG);
5955 }
5956 isMounted = true;
5957 app._container = rootContainer;
5958 rootContainer.__vue_app__ = app;
5959 {
5960 app._instance = vnode.component;
5961 devtoolsInitApp(app, version);
5962 }
5963 return getExposeProxy(vnode.component) || vnode.component.proxy;
5964 }
5965 else {
5966 warn(`App has already been mounted.\n` +
5967 `If you want to remount the same app, move your app creation logic ` +
5968 `into a factory function and create fresh app instances for each ` +
5969 `mount - e.g. \`const createMyApp = () => createApp(App)\``);
5970 }
5971 },
5972 unmount() {
5973 if (isMounted) {
5974 render(null, app._container);
5975 {
5976 app._instance = null;
5977 devtoolsUnmountApp(app);
5978 }
5979 delete app._container.__vue_app__;
5980 }
5981 else {
5982 warn(`Cannot unmount an app that is not mounted.`);
5983 }
5984 },
5985 provide(key, value) {
5986 if (key in context.provides) {
5987 warn(`App already provides property with key "${String(key)}". ` +
5988 `It will be overwritten with the new value.`);
5989 }
5990 context.provides[key] = value;
5991 return app;
5992 }
5993 });
5994 return app;
5995 };
5996}
5997
5998/**
5999 * Function for handling a template ref
6000 */
6001function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
6002 if (isArray(rawRef)) {
6003 rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));
6004 return;
6005 }
6006 if (isAsyncWrapper(vnode) && !isUnmount) {
6007 // when mounting async components, nothing needs to be done,
6008 // because the template ref is forwarded to inner component
6009 return;
6010 }
6011 const refValue = vnode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */
6012 ? getExposeProxy(vnode.component) || vnode.component.proxy
6013 : vnode.el;
6014 const value = isUnmount ? null : refValue;
6015 const { i: owner, r: ref } = rawRef;
6016 if (!owner) {
6017 warn(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
6018 `A vnode with ref must be created inside the render function.`);
6019 return;
6020 }
6021 const oldRef = oldRawRef && oldRawRef.r;
6022 const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;
6023 const setupState = owner.setupState;
6024 // dynamic ref changed. unset old ref
6025 if (oldRef != null && oldRef !== ref) {
6026 if (isString(oldRef)) {
6027 refs[oldRef] = null;
6028 if (hasOwn(setupState, oldRef)) {
6029 setupState[oldRef] = null;
6030 }
6031 }
6032 else if (isRef(oldRef)) {
6033 oldRef.value = null;
6034 }
6035 }
6036 if (isFunction(ref)) {
6037 callWithErrorHandling(ref, owner, 12 /* ErrorCodes.FUNCTION_REF */, [value, refs]);
6038 }
6039 else {
6040 const _isString = isString(ref);
6041 const _isRef = isRef(ref);
6042 if (_isString || _isRef) {
6043 const doSet = () => {
6044 if (rawRef.f) {
6045 const existing = _isString
6046 ? hasOwn(setupState, ref)
6047 ? setupState[ref]
6048 : refs[ref]
6049 : ref.value;
6050 if (isUnmount) {
6051 isArray(existing) && remove(existing, refValue);
6052 }
6053 else {
6054 if (!isArray(existing)) {
6055 if (_isString) {
6056 refs[ref] = [refValue];
6057 if (hasOwn(setupState, ref)) {
6058 setupState[ref] = refs[ref];
6059 }
6060 }
6061 else {
6062 ref.value = [refValue];
6063 if (rawRef.k)
6064 refs[rawRef.k] = ref.value;
6065 }
6066 }
6067 else if (!existing.includes(refValue)) {
6068 existing.push(refValue);
6069 }
6070 }
6071 }
6072 else if (_isString) {
6073 refs[ref] = value;
6074 if (hasOwn(setupState, ref)) {
6075 setupState[ref] = value;
6076 }
6077 }
6078 else if (_isRef) {
6079 ref.value = value;
6080 if (rawRef.k)
6081 refs[rawRef.k] = value;
6082 }
6083 else {
6084 warn('Invalid template ref type:', ref, `(${typeof ref})`);
6085 }
6086 };
6087 if (value) {
6088 doSet.id = -1;
6089 queuePostRenderEffect(doSet, parentSuspense);
6090 }
6091 else {
6092 doSet();
6093 }
6094 }
6095 else {
6096 warn('Invalid template ref type:', ref, `(${typeof ref})`);
6097 }
6098 }
6099}
6100
6101let hasMismatch = false;
6102const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject';
6103const isComment = (node) => node.nodeType === 8 /* DOMNodeTypes.COMMENT */;
6104// Note: hydration is DOM-specific
6105// But we have to place it in core due to tight coupling with core - splitting
6106// it out creates a ton of unnecessary complexity.
6107// Hydration also depends on some renderer internal logic which needs to be
6108// passed in via arguments.
6109function createHydrationFunctions(rendererInternals) {
6110 const { mt: mountComponent, p: patch, o: { patchProp, createText, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;
6111 const hydrate = (vnode, container) => {
6112 if (!container.hasChildNodes()) {
6113 warn(`Attempting to hydrate existing markup but container is empty. ` +
6114 `Performing full mount instead.`);
6115 patch(null, vnode, container);
6116 flushPostFlushCbs();
6117 container._vnode = vnode;
6118 return;
6119 }
6120 hasMismatch = false;
6121 hydrateNode(container.firstChild, vnode, null, null, null);
6122 flushPostFlushCbs();
6123 container._vnode = vnode;
6124 if (hasMismatch && !false) {
6125 // this error should show up in production
6126 console.error(`Hydration completed but contains mismatches.`);
6127 }
6128 };
6129 const hydrateNode = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized = false) => {
6130 const isFragmentStart = isComment(node) && node.data === '[';
6131 const onMismatch = () => handleMismatch(node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragmentStart);
6132 const { type, ref, shapeFlag, patchFlag } = vnode;
6133 let domType = node.nodeType;
6134 vnode.el = node;
6135 if (patchFlag === -2 /* PatchFlags.BAIL */) {
6136 optimized = false;
6137 vnode.dynamicChildren = null;
6138 }
6139 let nextNode = null;
6140 switch (type) {
6141 case Text:
6142 if (domType !== 3 /* DOMNodeTypes.TEXT */) {
6143 // #5728 empty text node inside a slot can cause hydration failure
6144 // because the server rendered HTML won't contain a text node
6145 if (vnode.children === '') {
6146 insert((vnode.el = createText('')), parentNode(node), node);
6147 nextNode = node;
6148 }
6149 else {
6150 nextNode = onMismatch();
6151 }
6152 }
6153 else {
6154 if (node.data !== vnode.children) {
6155 hasMismatch = true;
6156 warn(`Hydration text mismatch:` +
6157 `\n- Client: ${JSON.stringify(node.data)}` +
6158 `\n- Server: ${JSON.stringify(vnode.children)}`);
6159 node.data = vnode.children;
6160 }
6161 nextNode = nextSibling(node);
6162 }
6163 break;
6164 case Comment:
6165 if (domType !== 8 /* DOMNodeTypes.COMMENT */ || isFragmentStart) {
6166 nextNode = onMismatch();
6167 }
6168 else {
6169 nextNode = nextSibling(node);
6170 }
6171 break;
6172 case Static:
6173 if (isFragmentStart) {
6174 // entire template is static but SSRed as a fragment
6175 node = nextSibling(node);
6176 domType = node.nodeType;
6177 }
6178 if (domType === 1 /* DOMNodeTypes.ELEMENT */ || domType === 3 /* DOMNodeTypes.TEXT */) {
6179 // determine anchor, adopt content
6180 nextNode = node;
6181 // if the static vnode has its content stripped during build,
6182 // adopt it from the server-rendered HTML.
6183 const needToAdoptContent = !vnode.children.length;
6184 for (let i = 0; i < vnode.staticCount; i++) {
6185 if (needToAdoptContent)
6186 vnode.children +=
6187 nextNode.nodeType === 1 /* DOMNodeTypes.ELEMENT */
6188 ? nextNode.outerHTML
6189 : nextNode.data;
6190 if (i === vnode.staticCount - 1) {
6191 vnode.anchor = nextNode;
6192 }
6193 nextNode = nextSibling(nextNode);
6194 }
6195 return isFragmentStart ? nextSibling(nextNode) : nextNode;
6196 }
6197 else {
6198 onMismatch();
6199 }
6200 break;
6201 case Fragment:
6202 if (!isFragmentStart) {
6203 nextNode = onMismatch();
6204 }
6205 else {
6206 nextNode = hydrateFragment(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized);
6207 }
6208 break;
6209 default:
6210 if (shapeFlag & 1 /* ShapeFlags.ELEMENT */) {
6211 if (domType !== 1 /* DOMNodeTypes.ELEMENT */ ||
6212 vnode.type.toLowerCase() !==
6213 node.tagName.toLowerCase()) {
6214 nextNode = onMismatch();
6215 }
6216 else {
6217 nextNode = hydrateElement(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized);
6218 }
6219 }
6220 else if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
6221 // when setting up the render effect, if the initial vnode already
6222 // has .el set, the component will perform hydration instead of mount
6223 // on its sub-tree.
6224 vnode.slotScopeIds = slotScopeIds;
6225 const container = parentNode(node);
6226 mountComponent(vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), optimized);
6227 // component may be async, so in the case of fragments we cannot rely
6228 // on component's rendered output to determine the end of the fragment
6229 // instead, we do a lookahead to find the end anchor node.
6230 nextNode = isFragmentStart
6231 ? locateClosingAsyncAnchor(node)
6232 : nextSibling(node);
6233 // #4293 teleport as component root
6234 if (nextNode &&
6235 isComment(nextNode) &&
6236 nextNode.data === 'teleport end') {
6237 nextNode = nextSibling(nextNode);
6238 }
6239 // #3787
6240 // if component is async, it may get moved / unmounted before its
6241 // inner component is loaded, so we need to give it a placeholder
6242 // vnode that matches its adopted DOM.
6243 if (isAsyncWrapper(vnode)) {
6244 let subTree;
6245 if (isFragmentStart) {
6246 subTree = createVNode(Fragment);
6247 subTree.anchor = nextNode
6248 ? nextNode.previousSibling
6249 : container.lastChild;
6250 }
6251 else {
6252 subTree =
6253 node.nodeType === 3 ? createTextVNode('') : createVNode('div');
6254 }
6255 subTree.el = node;
6256 vnode.component.subTree = subTree;
6257 }
6258 }
6259 else if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
6260 if (domType !== 8 /* DOMNodeTypes.COMMENT */) {
6261 nextNode = onMismatch();
6262 }
6263 else {
6264 nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, rendererInternals, hydrateChildren);
6265 }
6266 }
6267 else if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
6268 nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, isSVGContainer(parentNode(node)), slotScopeIds, optimized, rendererInternals, hydrateNode);
6269 }
6270 else {
6271 warn('Invalid HostVNode type:', type, `(${typeof type})`);
6272 }
6273 }
6274 if (ref != null) {
6275 setRef(ref, null, parentSuspense, vnode);
6276 }
6277 return nextNode;
6278 };
6279 const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
6280 optimized = optimized || !!vnode.dynamicChildren;
6281 const { type, props, patchFlag, shapeFlag, dirs } = vnode;
6282 // #4006 for form elements with non-string v-model value bindings
6283 // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
6284 const forcePatchValue = (type === 'input' && dirs) || type === 'option';
6285 // skip props & children if this is hoisted static nodes
6286 // #5405 in dev, always hydrate children for HMR
6287 {
6288 if (dirs) {
6289 invokeDirectiveHook(vnode, null, parentComponent, 'created');
6290 }
6291 // props
6292 if (props) {
6293 if (forcePatchValue ||
6294 !optimized ||
6295 patchFlag & (16 /* PatchFlags.FULL_PROPS */ | 32 /* PatchFlags.HYDRATE_EVENTS */)) {
6296 for (const key in props) {
6297 if ((forcePatchValue && key.endsWith('value')) ||
6298 (isOn(key) && !isReservedProp(key))) {
6299 patchProp(el, key, null, props[key], false, undefined, parentComponent);
6300 }
6301 }
6302 }
6303 else if (props.onClick) {
6304 // Fast path for click listeners (which is most often) to avoid
6305 // iterating through props.
6306 patchProp(el, 'onClick', null, props.onClick, false, undefined, parentComponent);
6307 }
6308 }
6309 // vnode / directive hooks
6310 let vnodeHooks;
6311 if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
6312 invokeVNodeHook(vnodeHooks, parentComponent, vnode);
6313 }
6314 if (dirs) {
6315 invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');
6316 }
6317 if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {
6318 queueEffectWithSuspense(() => {
6319 vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
6320 dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');
6321 }, parentSuspense);
6322 }
6323 // children
6324 if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */ &&
6325 // skip if element has innerHTML / textContent
6326 !(props && (props.innerHTML || props.textContent))) {
6327 let next = hydrateChildren(el.firstChild, vnode, el, parentComponent, parentSuspense, slotScopeIds, optimized);
6328 let hasWarned = false;
6329 while (next) {
6330 hasMismatch = true;
6331 if (!hasWarned) {
6332 warn(`Hydration children mismatch in <${vnode.type}>: ` +
6333 `server rendered element contains more child nodes than client vdom.`);
6334 hasWarned = true;
6335 }
6336 // The SSRed DOM contains more nodes than it should. Remove them.
6337 const cur = next;
6338 next = next.nextSibling;
6339 remove(cur);
6340 }
6341 }
6342 else if (shapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
6343 if (el.textContent !== vnode.children) {
6344 hasMismatch = true;
6345 warn(`Hydration text content mismatch in <${vnode.type}>:\n` +
6346 `- Client: ${el.textContent}\n` +
6347 `- Server: ${vnode.children}`);
6348 el.textContent = vnode.children;
6349 }
6350 }
6351 }
6352 return el.nextSibling;
6353 };
6354 const hydrateChildren = (node, parentVNode, container, parentComponent, parentSuspense, slotScopeIds, optimized) => {
6355 optimized = optimized || !!parentVNode.dynamicChildren;
6356 const children = parentVNode.children;
6357 const l = children.length;
6358 let hasWarned = false;
6359 for (let i = 0; i < l; i++) {
6360 const vnode = optimized
6361 ? children[i]
6362 : (children[i] = normalizeVNode(children[i]));
6363 if (node) {
6364 node = hydrateNode(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized);
6365 }
6366 else if (vnode.type === Text && !vnode.children) {
6367 continue;
6368 }
6369 else {
6370 hasMismatch = true;
6371 if (!hasWarned) {
6372 warn(`Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
6373 `server rendered element contains fewer child nodes than client vdom.`);
6374 hasWarned = true;
6375 }
6376 // the SSRed DOM didn't contain enough nodes. Mount the missing ones.
6377 patch(null, vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), slotScopeIds);
6378 }
6379 }
6380 return node;
6381 };
6382 const hydrateFragment = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
6383 const { slotScopeIds: fragmentSlotScopeIds } = vnode;
6384 if (fragmentSlotScopeIds) {
6385 slotScopeIds = slotScopeIds
6386 ? slotScopeIds.concat(fragmentSlotScopeIds)
6387 : fragmentSlotScopeIds;
6388 }
6389 const container = parentNode(node);
6390 const next = hydrateChildren(nextSibling(node), vnode, container, parentComponent, parentSuspense, slotScopeIds, optimized);
6391 if (next && isComment(next) && next.data === ']') {
6392 return nextSibling((vnode.anchor = next));
6393 }
6394 else {
6395 // fragment didn't hydrate successfully, since we didn't get a end anchor
6396 // back. This should have led to node/children mismatch warnings.
6397 hasMismatch = true;
6398 // since the anchor is missing, we need to create one and insert it
6399 insert((vnode.anchor = createComment(`]`)), container, next);
6400 return next;
6401 }
6402 };
6403 const handleMismatch = (node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragment) => {
6404 hasMismatch = true;
6405 warn(`Hydration node mismatch:\n- Client vnode:`, vnode.type, `\n- Server rendered DOM:`, node, node.nodeType === 3 /* DOMNodeTypes.TEXT */
6406 ? `(text)`
6407 : isComment(node) && node.data === '['
6408 ? `(start of fragment)`
6409 : ``);
6410 vnode.el = null;
6411 if (isFragment) {
6412 // remove excessive fragment nodes
6413 const end = locateClosingAsyncAnchor(node);
6414 while (true) {
6415 const next = nextSibling(node);
6416 if (next && next !== end) {
6417 remove(next);
6418 }
6419 else {
6420 break;
6421 }
6422 }
6423 }
6424 const next = nextSibling(node);
6425 const container = parentNode(node);
6426 remove(node);
6427 patch(null, vnode, container, next, parentComponent, parentSuspense, isSVGContainer(container), slotScopeIds);
6428 return next;
6429 };
6430 const locateClosingAsyncAnchor = (node) => {
6431 let match = 0;
6432 while (node) {
6433 node = nextSibling(node);
6434 if (node && isComment(node)) {
6435 if (node.data === '[')
6436 match++;
6437 if (node.data === ']') {
6438 if (match === 0) {
6439 return nextSibling(node);
6440 }
6441 else {
6442 match--;
6443 }
6444 }
6445 }
6446 }
6447 return node;
6448 };
6449 return [hydrate, hydrateNode];
6450}
6451
6452/* eslint-disable no-restricted-globals */
6453let supported;
6454let perf;
6455function startMeasure(instance, type) {
6456 if (instance.appContext.config.performance && isSupported()) {
6457 perf.mark(`vue-${type}-${instance.uid}`);
6458 }
6459 {
6460 devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
6461 }
6462}
6463function endMeasure(instance, type) {
6464 if (instance.appContext.config.performance && isSupported()) {
6465 const startTag = `vue-${type}-${instance.uid}`;
6466 const endTag = startTag + `:end`;
6467 perf.mark(endTag);
6468 perf.measure(`<${formatComponentName(instance, instance.type)}> ${type}`, startTag, endTag);
6469 perf.clearMarks(startTag);
6470 perf.clearMarks(endTag);
6471 }
6472 {
6473 devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
6474 }
6475}
6476function isSupported() {
6477 if (supported !== undefined) {
6478 return supported;
6479 }
6480 if (typeof window !== 'undefined' && window.performance) {
6481 supported = true;
6482 perf = window.performance;
6483 }
6484 else {
6485 supported = false;
6486 }
6487 return supported;
6488}
6489
6490const queuePostRenderEffect = queueEffectWithSuspense
6491 ;
6492/**
6493 * The createRenderer function accepts two generic arguments:
6494 * HostNode and HostElement, corresponding to Node and Element types in the
6495 * host environment. For example, for runtime-dom, HostNode would be the DOM
6496 * `Node` interface and HostElement would be the DOM `Element` interface.
6497 *
6498 * Custom renderers can pass in the platform specific types like this:
6499 *
6500 * ``` js
6501 * const { render, createApp } = createRenderer<Node, Element>({
6502 * patchProp,
6503 * ...nodeOps
6504 * })
6505 * ```
6506 */
6507function createRenderer(options) {
6508 return baseCreateRenderer(options);
6509}
6510// Separate API for creating hydration-enabled renderer.
6511// Hydration logic is only used when calling this function, making it
6512// tree-shakable.
6513function createHydrationRenderer(options) {
6514 return baseCreateRenderer(options, createHydrationFunctions);
6515}
6516// implementation
6517function baseCreateRenderer(options, createHydrationFns) {
6518 const target = getGlobalThis();
6519 target.__VUE__ = true;
6520 {
6521 setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target);
6522 }
6523 const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, insertStaticContent: hostInsertStaticContent } = options;
6524 // Note: functions inside this closure should use `const xxx = () => {}`
6525 // style in order to prevent being inlined by minifiers.
6526 const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
6527 if (n1 === n2) {
6528 return;
6529 }
6530 // patching & not same type, unmount old tree
6531 if (n1 && !isSameVNodeType(n1, n2)) {
6532 anchor = getNextHostNode(n1);
6533 unmount(n1, parentComponent, parentSuspense, true);
6534 n1 = null;
6535 }
6536 if (n2.patchFlag === -2 /* PatchFlags.BAIL */) {
6537 optimized = false;
6538 n2.dynamicChildren = null;
6539 }
6540 const { type, ref, shapeFlag } = n2;
6541 switch (type) {
6542 case Text:
6543 processText(n1, n2, container, anchor);
6544 break;
6545 case Comment:
6546 processCommentNode(n1, n2, container, anchor);
6547 break;
6548 case Static:
6549 if (n1 == null) {
6550 mountStaticNode(n2, container, anchor, isSVG);
6551 }
6552 else {
6553 patchStaticNode(n1, n2, container, isSVG);
6554 }
6555 break;
6556 case Fragment:
6557 processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6558 break;
6559 default:
6560 if (shapeFlag & 1 /* ShapeFlags.ELEMENT */) {
6561 processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6562 }
6563 else if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
6564 processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6565 }
6566 else if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
6567 type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals);
6568 }
6569 else if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
6570 type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals);
6571 }
6572 else {
6573 warn('Invalid VNode type:', type, `(${typeof type})`);
6574 }
6575 }
6576 // set ref
6577 if (ref != null && parentComponent) {
6578 setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2);
6579 }
6580 };
6581 const processText = (n1, n2, container, anchor) => {
6582 if (n1 == null) {
6583 hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);
6584 }
6585 else {
6586 const el = (n2.el = n1.el);
6587 if (n2.children !== n1.children) {
6588 hostSetText(el, n2.children);
6589 }
6590 }
6591 };
6592 const processCommentNode = (n1, n2, container, anchor) => {
6593 if (n1 == null) {
6594 hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);
6595 }
6596 else {
6597 // there's no support for dynamic comments
6598 n2.el = n1.el;
6599 }
6600 };
6601 const mountStaticNode = (n2, container, anchor, isSVG) => {
6602 [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG, n2.el, n2.anchor);
6603 };
6604 /**
6605 * Dev / HMR only
6606 */
6607 const patchStaticNode = (n1, n2, container, isSVG) => {
6608 // static nodes are only patched during dev for HMR
6609 if (n2.children !== n1.children) {
6610 const anchor = hostNextSibling(n1.anchor);
6611 // remove existing
6612 removeStaticNode(n1);
6613 [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG);
6614 }
6615 else {
6616 n2.el = n1.el;
6617 n2.anchor = n1.anchor;
6618 }
6619 };
6620 const moveStaticNode = ({ el, anchor }, container, nextSibling) => {
6621 let next;
6622 while (el && el !== anchor) {
6623 next = hostNextSibling(el);
6624 hostInsert(el, container, nextSibling);
6625 el = next;
6626 }
6627 hostInsert(anchor, container, nextSibling);
6628 };
6629 const removeStaticNode = ({ el, anchor }) => {
6630 let next;
6631 while (el && el !== anchor) {
6632 next = hostNextSibling(el);
6633 hostRemove(el);
6634 el = next;
6635 }
6636 hostRemove(anchor);
6637 };
6638 const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6639 isSVG = isSVG || n2.type === 'svg';
6640 if (n1 == null) {
6641 mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6642 }
6643 else {
6644 patchElement(n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6645 }
6646 };
6647 const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6648 let el;
6649 let vnodeHook;
6650 const { type, props, shapeFlag, transition, dirs } = vnode;
6651 el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is, props);
6652 // mount children first, since some props may rely on child content
6653 // being already rendered, e.g. `<select value>`
6654 if (shapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
6655 hostSetElementText(el, vnode.children);
6656 }
6657 else if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
6658 mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', slotScopeIds, optimized);
6659 }
6660 if (dirs) {
6661 invokeDirectiveHook(vnode, null, parentComponent, 'created');
6662 }
6663 // scopeId
6664 setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent);
6665 // props
6666 if (props) {
6667 for (const key in props) {
6668 if (key !== 'value' && !isReservedProp(key)) {
6669 hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
6670 }
6671 }
6672 /**
6673 * Special case for setting value on DOM elements:
6674 * - it can be order-sensitive (e.g. should be set *after* min/max, #2325, #4024)
6675 * - it needs to be forced (#1471)
6676 * #2353 proposes adding another renderer option to configure this, but
6677 * the properties affects are so finite it is worth special casing it
6678 * here to reduce the complexity. (Special casing it also should not
6679 * affect non-DOM renderers)
6680 */
6681 if ('value' in props) {
6682 hostPatchProp(el, 'value', null, props.value);
6683 }
6684 if ((vnodeHook = props.onVnodeBeforeMount)) {
6685 invokeVNodeHook(vnodeHook, parentComponent, vnode);
6686 }
6687 }
6688 {
6689 Object.defineProperty(el, '__vnode', {
6690 value: vnode,
6691 enumerable: false
6692 });
6693 Object.defineProperty(el, '__vueParentComponent', {
6694 value: parentComponent,
6695 enumerable: false
6696 });
6697 }
6698 if (dirs) {
6699 invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');
6700 }
6701 // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
6702 // #1689 For inside suspense + suspense resolved case, just call it
6703 const needCallTransitionHooks = (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
6704 transition &&
6705 !transition.persisted;
6706 if (needCallTransitionHooks) {
6707 transition.beforeEnter(el);
6708 }
6709 hostInsert(el, container, anchor);
6710 if ((vnodeHook = props && props.onVnodeMounted) ||
6711 needCallTransitionHooks ||
6712 dirs) {
6713 queuePostRenderEffect(() => {
6714 vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
6715 needCallTransitionHooks && transition.enter(el);
6716 dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');
6717 }, parentSuspense);
6718 }
6719 };
6720 const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => {
6721 if (scopeId) {
6722 hostSetScopeId(el, scopeId);
6723 }
6724 if (slotScopeIds) {
6725 for (let i = 0; i < slotScopeIds.length; i++) {
6726 hostSetScopeId(el, slotScopeIds[i]);
6727 }
6728 }
6729 if (parentComponent) {
6730 let subTree = parentComponent.subTree;
6731 if (subTree.patchFlag > 0 &&
6732 subTree.patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */) {
6733 subTree =
6734 filterSingleRoot(subTree.children) || subTree;
6735 }
6736 if (vnode === subTree) {
6737 const parentVNode = parentComponent.vnode;
6738 setScopeId(el, parentVNode, parentVNode.scopeId, parentVNode.slotScopeIds, parentComponent.parent);
6739 }
6740 }
6741 };
6742 const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => {
6743 for (let i = start; i < children.length; i++) {
6744 const child = (children[i] = optimized
6745 ? cloneIfMounted(children[i])
6746 : normalizeVNode(children[i]));
6747 patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6748 }
6749 };
6750 const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6751 const el = (n2.el = n1.el);
6752 let { patchFlag, dynamicChildren, dirs } = n2;
6753 // #1426 take the old vnode's patch flag into account since user may clone a
6754 // compiler-generated vnode, which de-opts to FULL_PROPS
6755 patchFlag |= n1.patchFlag & 16 /* PatchFlags.FULL_PROPS */;
6756 const oldProps = n1.props || EMPTY_OBJ;
6757 const newProps = n2.props || EMPTY_OBJ;
6758 let vnodeHook;
6759 // disable recurse in beforeUpdate hooks
6760 parentComponent && toggleRecurse(parentComponent, false);
6761 if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {
6762 invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
6763 }
6764 if (dirs) {
6765 invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');
6766 }
6767 parentComponent && toggleRecurse(parentComponent, true);
6768 if (isHmrUpdating) {
6769 // HMR updated, force full diff
6770 patchFlag = 0;
6771 optimized = false;
6772 dynamicChildren = null;
6773 }
6774 const areChildrenSVG = isSVG && n2.type !== 'foreignObject';
6775 if (dynamicChildren) {
6776 patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds);
6777 if (parentComponent && parentComponent.type.__hmrId) {
6778 traverseStaticChildren(n1, n2);
6779 }
6780 }
6781 else if (!optimized) {
6782 // full diff
6783 patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds, false);
6784 }
6785 if (patchFlag > 0) {
6786 // the presence of a patchFlag means this element's render code was
6787 // generated by the compiler and can take the fast path.
6788 // in this path old node and new node are guaranteed to have the same shape
6789 // (i.e. at the exact same position in the source template)
6790 if (patchFlag & 16 /* PatchFlags.FULL_PROPS */) {
6791 // element props contain dynamic keys, full diff needed
6792 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);
6793 }
6794 else {
6795 // class
6796 // this flag is matched when the element has dynamic class bindings.
6797 if (patchFlag & 2 /* PatchFlags.CLASS */) {
6798 if (oldProps.class !== newProps.class) {
6799 hostPatchProp(el, 'class', null, newProps.class, isSVG);
6800 }
6801 }
6802 // style
6803 // this flag is matched when the element has dynamic style bindings
6804 if (patchFlag & 4 /* PatchFlags.STYLE */) {
6805 hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);
6806 }
6807 // props
6808 // This flag is matched when the element has dynamic prop/attr bindings
6809 // other than class and style. The keys of dynamic prop/attrs are saved for
6810 // faster iteration.
6811 // Note dynamic keys like :[foo]="bar" will cause this optimization to
6812 // bail out and go through a full diff because we need to unset the old key
6813 if (patchFlag & 8 /* PatchFlags.PROPS */) {
6814 // if the flag is present then dynamicProps must be non-null
6815 const propsToUpdate = n2.dynamicProps;
6816 for (let i = 0; i < propsToUpdate.length; i++) {
6817 const key = propsToUpdate[i];
6818 const prev = oldProps[key];
6819 const next = newProps[key];
6820 // #1471 force patch value
6821 if (next !== prev || key === 'value') {
6822 hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);
6823 }
6824 }
6825 }
6826 }
6827 // text
6828 // This flag is matched when the element has only dynamic text children.
6829 if (patchFlag & 1 /* PatchFlags.TEXT */) {
6830 if (n1.children !== n2.children) {
6831 hostSetElementText(el, n2.children);
6832 }
6833 }
6834 }
6835 else if (!optimized && dynamicChildren == null) {
6836 // unoptimized, full diff
6837 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);
6838 }
6839 if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
6840 queuePostRenderEffect(() => {
6841 vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
6842 dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');
6843 }, parentSuspense);
6844 }
6845 };
6846 // The fast path for blocks.
6847 const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => {
6848 for (let i = 0; i < newChildren.length; i++) {
6849 const oldVNode = oldChildren[i];
6850 const newVNode = newChildren[i];
6851 // Determine the container (parent element) for the patch.
6852 const container =
6853 // oldVNode may be an errored async setup() component inside Suspense
6854 // which will not have a mounted element
6855 oldVNode.el &&
6856 // - In the case of a Fragment, we need to provide the actual parent
6857 // of the Fragment itself so it can move its children.
6858 (oldVNode.type === Fragment ||
6859 // - In the case of different nodes, there is going to be a replacement
6860 // which also requires the correct parent container
6861 !isSameVNodeType(oldVNode, newVNode) ||
6862 // - In the case of a component, it could contain anything.
6863 oldVNode.shapeFlag & (6 /* ShapeFlags.COMPONENT */ | 64 /* ShapeFlags.TELEPORT */))
6864 ? hostParentNode(oldVNode.el)
6865 : // In other cases, the parent container is not actually used so we
6866 // just pass the block element here to avoid a DOM parentNode call.
6867 fallbackContainer;
6868 patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, true);
6869 }
6870 };
6871 const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
6872 if (oldProps !== newProps) {
6873 if (oldProps !== EMPTY_OBJ) {
6874 for (const key in oldProps) {
6875 if (!isReservedProp(key) && !(key in newProps)) {
6876 hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
6877 }
6878 }
6879 }
6880 for (const key in newProps) {
6881 // empty string is not valid prop
6882 if (isReservedProp(key))
6883 continue;
6884 const next = newProps[key];
6885 const prev = oldProps[key];
6886 // defer patching value
6887 if (next !== prev && key !== 'value') {
6888 hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
6889 }
6890 }
6891 if ('value' in newProps) {
6892 hostPatchProp(el, 'value', oldProps.value, newProps.value);
6893 }
6894 }
6895 };
6896 const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6897 const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));
6898 const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));
6899 let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
6900 if (// #5523 dev root fragment may inherit directives
6901 (isHmrUpdating || patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */)) {
6902 // HMR updated / Dev root fragment (w/ comments), force full diff
6903 patchFlag = 0;
6904 optimized = false;
6905 dynamicChildren = null;
6906 }
6907 // check if this is a slot fragment with :slotted scope ids
6908 if (fragmentSlotScopeIds) {
6909 slotScopeIds = slotScopeIds
6910 ? slotScopeIds.concat(fragmentSlotScopeIds)
6911 : fragmentSlotScopeIds;
6912 }
6913 if (n1 == null) {
6914 hostInsert(fragmentStartAnchor, container, anchor);
6915 hostInsert(fragmentEndAnchor, container, anchor);
6916 // a fragment can only have array children
6917 // since they are either generated by the compiler, or implicitly created
6918 // from arrays.
6919 mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6920 }
6921 else {
6922 if (patchFlag > 0 &&
6923 patchFlag & 64 /* PatchFlags.STABLE_FRAGMENT */ &&
6924 dynamicChildren &&
6925 // #2715 the previous fragment could've been a BAILed one as a result
6926 // of renderSlot() with no valid children
6927 n1.dynamicChildren) {
6928 // a stable fragment (template root or <template v-for>) doesn't need to
6929 // patch children order, but it may contain dynamicChildren.
6930 patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG, slotScopeIds);
6931 if (parentComponent && parentComponent.type.__hmrId) {
6932 traverseStaticChildren(n1, n2);
6933 }
6934 else if (
6935 // #2080 if the stable fragment has a key, it's a <template v-for> that may
6936 // get moved around. Make sure all root level vnodes inherit el.
6937 // #2134 or if it's a component root, it may also get moved around
6938 // as the component is being moved.
6939 n2.key != null ||
6940 (parentComponent && n2 === parentComponent.subTree)) {
6941 traverseStaticChildren(n1, n2, true /* shallow */);
6942 }
6943 }
6944 else {
6945 // keyed / unkeyed, or manual fragments.
6946 // for keyed & unkeyed, since they are compiler generated from v-for,
6947 // each child is guaranteed to be a block so the fragment will never
6948 // have dynamicChildren.
6949 patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
6950 }
6951 }
6952 };
6953 const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6954 n2.slotScopeIds = slotScopeIds;
6955 if (n1 == null) {
6956 if (n2.shapeFlag & 512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */) {
6957 parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);
6958 }
6959 else {
6960 mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
6961 }
6962 }
6963 else {
6964 updateComponent(n1, n2, optimized);
6965 }
6966 };
6967 const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
6968 const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));
6969 if (instance.type.__hmrId) {
6970 registerHMR(instance);
6971 }
6972 {
6973 pushWarningContext(initialVNode);
6974 startMeasure(instance, `mount`);
6975 }
6976 // inject renderer internals for keepAlive
6977 if (isKeepAlive(initialVNode)) {
6978 instance.ctx.renderer = internals;
6979 }
6980 // resolve props and slots for setup context
6981 {
6982 {
6983 startMeasure(instance, `init`);
6984 }
6985 setupComponent(instance);
6986 {
6987 endMeasure(instance, `init`);
6988 }
6989 }
6990 // setup() is async. This component relies on async logic to be resolved
6991 // before proceeding
6992 if (instance.asyncDep) {
6993 parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);
6994 // Give it a placeholder if this is not hydration
6995 // TODO handle self-defined fallback
6996 if (!initialVNode.el) {
6997 const placeholder = (instance.subTree = createVNode(Comment));
6998 processCommentNode(null, placeholder, container, anchor);
6999 }
7000 return;
7001 }
7002 setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);
7003 {
7004 popWarningContext();
7005 endMeasure(instance, `mount`);
7006 }
7007 };
7008 const updateComponent = (n1, n2, optimized) => {
7009 const instance = (n2.component = n1.component);
7010 if (shouldUpdateComponent(n1, n2, optimized)) {
7011 if (instance.asyncDep &&
7012 !instance.asyncResolved) {
7013 // async & still pending - just update props and slots
7014 // since the component's reactive effect for render isn't set-up yet
7015 {
7016 pushWarningContext(n2);
7017 }
7018 updateComponentPreRender(instance, n2, optimized);
7019 {
7020 popWarningContext();
7021 }
7022 return;
7023 }
7024 else {
7025 // normal update
7026 instance.next = n2;
7027 // in case the child component is also queued, remove it to avoid
7028 // double updating the same child component in the same flush.
7029 invalidateJob(instance.update);
7030 // instance.update is the reactive effect.
7031 instance.update();
7032 }
7033 }
7034 else {
7035 // no update needed. just copy over properties
7036 n2.el = n1.el;
7037 instance.vnode = n2;
7038 }
7039 };
7040 const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
7041 const componentUpdateFn = () => {
7042 if (!instance.isMounted) {
7043 let vnodeHook;
7044 const { el, props } = initialVNode;
7045 const { bm, m, parent } = instance;
7046 const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
7047 toggleRecurse(instance, false);
7048 // beforeMount hook
7049 if (bm) {
7050 invokeArrayFns(bm);
7051 }
7052 // onVnodeBeforeMount
7053 if (!isAsyncWrapperVNode &&
7054 (vnodeHook = props && props.onVnodeBeforeMount)) {
7055 invokeVNodeHook(vnodeHook, parent, initialVNode);
7056 }
7057 toggleRecurse(instance, true);
7058 if (el && hydrateNode) {
7059 // vnode has adopted host node - perform hydration instead of mount.
7060 const hydrateSubTree = () => {
7061 {
7062 startMeasure(instance, `render`);
7063 }
7064 instance.subTree = renderComponentRoot(instance);
7065 {
7066 endMeasure(instance, `render`);
7067 }
7068 {
7069 startMeasure(instance, `hydrate`);
7070 }
7071 hydrateNode(el, instance.subTree, instance, parentSuspense, null);
7072 {
7073 endMeasure(instance, `hydrate`);
7074 }
7075 };
7076 if (isAsyncWrapperVNode) {
7077 initialVNode.type.__asyncLoader().then(
7078 // note: we are moving the render call into an async callback,
7079 // which means it won't track dependencies - but it's ok because
7080 // a server-rendered async wrapper is already in resolved state
7081 // and it will never need to change.
7082 () => !instance.isUnmounted && hydrateSubTree());
7083 }
7084 else {
7085 hydrateSubTree();
7086 }
7087 }
7088 else {
7089 {
7090 startMeasure(instance, `render`);
7091 }
7092 const subTree = (instance.subTree = renderComponentRoot(instance));
7093 {
7094 endMeasure(instance, `render`);
7095 }
7096 {
7097 startMeasure(instance, `patch`);
7098 }
7099 patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);
7100 {
7101 endMeasure(instance, `patch`);
7102 }
7103 initialVNode.el = subTree.el;
7104 }
7105 // mounted hook
7106 if (m) {
7107 queuePostRenderEffect(m, parentSuspense);
7108 }
7109 // onVnodeMounted
7110 if (!isAsyncWrapperVNode &&
7111 (vnodeHook = props && props.onVnodeMounted)) {
7112 const scopedInitialVNode = initialVNode;
7113 queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense);
7114 }
7115 // activated hook for keep-alive roots.
7116 // #1742 activated hook must be accessed after first render
7117 // since the hook may be injected by a child keep-alive
7118 if (initialVNode.shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */ ||
7119 (parent &&
7120 isAsyncWrapper(parent.vnode) &&
7121 parent.vnode.shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */)) {
7122 instance.a && queuePostRenderEffect(instance.a, parentSuspense);
7123 }
7124 instance.isMounted = true;
7125 {
7126 devtoolsComponentAdded(instance);
7127 }
7128 // #2458: deference mount-only object parameters to prevent memleaks
7129 initialVNode = container = anchor = null;
7130 }
7131 else {
7132 // updateComponent
7133 // This is triggered by mutation of component's own state (next: null)
7134 // OR parent calling processComponent (next: VNode)
7135 let { next, bu, u, parent, vnode } = instance;
7136 let originNext = next;
7137 let vnodeHook;
7138 {
7139 pushWarningContext(next || instance.vnode);
7140 }
7141 // Disallow component effect recursion during pre-lifecycle hooks.
7142 toggleRecurse(instance, false);
7143 if (next) {
7144 next.el = vnode.el;
7145 updateComponentPreRender(instance, next, optimized);
7146 }
7147 else {
7148 next = vnode;
7149 }
7150 // beforeUpdate hook
7151 if (bu) {
7152 invokeArrayFns(bu);
7153 }
7154 // onVnodeBeforeUpdate
7155 if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
7156 invokeVNodeHook(vnodeHook, parent, next, vnode);
7157 }
7158 toggleRecurse(instance, true);
7159 // render
7160 {
7161 startMeasure(instance, `render`);
7162 }
7163 const nextTree = renderComponentRoot(instance);
7164 {
7165 endMeasure(instance, `render`);
7166 }
7167 const prevTree = instance.subTree;
7168 instance.subTree = nextTree;
7169 {
7170 startMeasure(instance, `patch`);
7171 }
7172 patch(prevTree, nextTree,
7173 // parent may have changed if it's in a teleport
7174 hostParentNode(prevTree.el),
7175 // anchor may have changed if it's in a fragment
7176 getNextHostNode(prevTree), instance, parentSuspense, isSVG);
7177 {
7178 endMeasure(instance, `patch`);
7179 }
7180 next.el = nextTree.el;
7181 if (originNext === null) {
7182 // self-triggered update. In case of HOC, update parent component
7183 // vnode el. HOC is indicated by parent instance's subTree pointing
7184 // to child component's vnode
7185 updateHOCHostEl(instance, nextTree.el);
7186 }
7187 // updated hook
7188 if (u) {
7189 queuePostRenderEffect(u, parentSuspense);
7190 }
7191 // onVnodeUpdated
7192 if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
7193 queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense);
7194 }
7195 {
7196 devtoolsComponentUpdated(instance);
7197 }
7198 {
7199 popWarningContext();
7200 }
7201 }
7202 };
7203 // create reactive effect for rendering
7204 const effect = (instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(update), instance.scope // track it in component's effect scope
7205 ));
7206 const update = (instance.update = () => effect.run());
7207 update.id = instance.uid;
7208 // allowRecurse
7209 // #1801, #2043 component render effects should allow recursive updates
7210 toggleRecurse(instance, true);
7211 {
7212 effect.onTrack = instance.rtc
7213 ? e => invokeArrayFns(instance.rtc, e)
7214 : void 0;
7215 effect.onTrigger = instance.rtg
7216 ? e => invokeArrayFns(instance.rtg, e)
7217 : void 0;
7218 update.ownerInstance = instance;
7219 }
7220 update();
7221 };
7222 const updateComponentPreRender = (instance, nextVNode, optimized) => {
7223 nextVNode.component = instance;
7224 const prevProps = instance.vnode.props;
7225 instance.vnode = nextVNode;
7226 instance.next = null;
7227 updateProps(instance, nextVNode.props, prevProps, optimized);
7228 updateSlots(instance, nextVNode.children, optimized);
7229 pauseTracking();
7230 // props update may have triggered pre-flush watchers.
7231 // flush them before the render update.
7232 flushPreFlushCbs();
7233 resetTracking();
7234 };
7235 const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
7236 const c1 = n1 && n1.children;
7237 const prevShapeFlag = n1 ? n1.shapeFlag : 0;
7238 const c2 = n2.children;
7239 const { patchFlag, shapeFlag } = n2;
7240 // fast path
7241 if (patchFlag > 0) {
7242 if (patchFlag & 128 /* PatchFlags.KEYED_FRAGMENT */) {
7243 // this could be either fully-keyed or mixed (some keyed some not)
7244 // presence of patchFlag means children are guaranteed to be arrays
7245 patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7246 return;
7247 }
7248 else if (patchFlag & 256 /* PatchFlags.UNKEYED_FRAGMENT */) {
7249 // unkeyed
7250 patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7251 return;
7252 }
7253 }
7254 // children has 3 possibilities: text, array or no children.
7255 if (shapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
7256 // text children fast path
7257 if (prevShapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7258 unmountChildren(c1, parentComponent, parentSuspense);
7259 }
7260 if (c2 !== c1) {
7261 hostSetElementText(container, c2);
7262 }
7263 }
7264 else {
7265 if (prevShapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7266 // prev children was array
7267 if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7268 // two arrays, cannot assume anything, do full diff
7269 patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7270 }
7271 else {
7272 // no new children, just unmount old
7273 unmountChildren(c1, parentComponent, parentSuspense, true);
7274 }
7275 }
7276 else {
7277 // prev children was text OR null
7278 // new children is array OR null
7279 if (prevShapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
7280 hostSetElementText(container, '');
7281 }
7282 // mount new if array
7283 if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7284 mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7285 }
7286 }
7287 }
7288 };
7289 const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
7290 c1 = c1 || EMPTY_ARR;
7291 c2 = c2 || EMPTY_ARR;
7292 const oldLength = c1.length;
7293 const newLength = c2.length;
7294 const commonLength = Math.min(oldLength, newLength);
7295 let i;
7296 for (i = 0; i < commonLength; i++) {
7297 const nextChild = (c2[i] = optimized
7298 ? cloneIfMounted(c2[i])
7299 : normalizeVNode(c2[i]));
7300 patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7301 }
7302 if (oldLength > newLength) {
7303 // remove old
7304 unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength);
7305 }
7306 else {
7307 // mount new
7308 mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength);
7309 }
7310 };
7311 // can be all-keyed or mixed
7312 const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
7313 let i = 0;
7314 const l2 = c2.length;
7315 let e1 = c1.length - 1; // prev ending index
7316 let e2 = l2 - 1; // next ending index
7317 // 1. sync from start
7318 // (a b) c
7319 // (a b) d e
7320 while (i <= e1 && i <= e2) {
7321 const n1 = c1[i];
7322 const n2 = (c2[i] = optimized
7323 ? cloneIfMounted(c2[i])
7324 : normalizeVNode(c2[i]));
7325 if (isSameVNodeType(n1, n2)) {
7326 patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7327 }
7328 else {
7329 break;
7330 }
7331 i++;
7332 }
7333 // 2. sync from end
7334 // a (b c)
7335 // d e (b c)
7336 while (i <= e1 && i <= e2) {
7337 const n1 = c1[e1];
7338 const n2 = (c2[e2] = optimized
7339 ? cloneIfMounted(c2[e2])
7340 : normalizeVNode(c2[e2]));
7341 if (isSameVNodeType(n1, n2)) {
7342 patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7343 }
7344 else {
7345 break;
7346 }
7347 e1--;
7348 e2--;
7349 }
7350 // 3. common sequence + mount
7351 // (a b)
7352 // (a b) c
7353 // i = 2, e1 = 1, e2 = 2
7354 // (a b)
7355 // c (a b)
7356 // i = 0, e1 = -1, e2 = 0
7357 if (i > e1) {
7358 if (i <= e2) {
7359 const nextPos = e2 + 1;
7360 const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;
7361 while (i <= e2) {
7362 patch(null, (c2[i] = optimized
7363 ? cloneIfMounted(c2[i])
7364 : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7365 i++;
7366 }
7367 }
7368 }
7369 // 4. common sequence + unmount
7370 // (a b) c
7371 // (a b)
7372 // i = 2, e1 = 2, e2 = 1
7373 // a (b c)
7374 // (b c)
7375 // i = 0, e1 = 0, e2 = -1
7376 else if (i > e2) {
7377 while (i <= e1) {
7378 unmount(c1[i], parentComponent, parentSuspense, true);
7379 i++;
7380 }
7381 }
7382 // 5. unknown sequence
7383 // [i ... e1 + 1]: a b [c d e] f g
7384 // [i ... e2 + 1]: a b [e d c h] f g
7385 // i = 2, e1 = 4, e2 = 5
7386 else {
7387 const s1 = i; // prev starting index
7388 const s2 = i; // next starting index
7389 // 5.1 build key:index map for newChildren
7390 const keyToNewIndexMap = new Map();
7391 for (i = s2; i <= e2; i++) {
7392 const nextChild = (c2[i] = optimized
7393 ? cloneIfMounted(c2[i])
7394 : normalizeVNode(c2[i]));
7395 if (nextChild.key != null) {
7396 if (keyToNewIndexMap.has(nextChild.key)) {
7397 warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);
7398 }
7399 keyToNewIndexMap.set(nextChild.key, i);
7400 }
7401 }
7402 // 5.2 loop through old children left to be patched and try to patch
7403 // matching nodes & remove nodes that are no longer present
7404 let j;
7405 let patched = 0;
7406 const toBePatched = e2 - s2 + 1;
7407 let moved = false;
7408 // used to track whether any node has moved
7409 let maxNewIndexSoFar = 0;
7410 // works as Map<newIndex, oldIndex>
7411 // Note that oldIndex is offset by +1
7412 // and oldIndex = 0 is a special value indicating the new node has
7413 // no corresponding old node.
7414 // used for determining longest stable subsequence
7415 const newIndexToOldIndexMap = new Array(toBePatched);
7416 for (i = 0; i < toBePatched; i++)
7417 newIndexToOldIndexMap[i] = 0;
7418 for (i = s1; i <= e1; i++) {
7419 const prevChild = c1[i];
7420 if (patched >= toBePatched) {
7421 // all new children have been patched so this can only be a removal
7422 unmount(prevChild, parentComponent, parentSuspense, true);
7423 continue;
7424 }
7425 let newIndex;
7426 if (prevChild.key != null) {
7427 newIndex = keyToNewIndexMap.get(prevChild.key);
7428 }
7429 else {
7430 // key-less node, try to locate a key-less node of the same type
7431 for (j = s2; j <= e2; j++) {
7432 if (newIndexToOldIndexMap[j - s2] === 0 &&
7433 isSameVNodeType(prevChild, c2[j])) {
7434 newIndex = j;
7435 break;
7436 }
7437 }
7438 }
7439 if (newIndex === undefined) {
7440 unmount(prevChild, parentComponent, parentSuspense, true);
7441 }
7442 else {
7443 newIndexToOldIndexMap[newIndex - s2] = i + 1;
7444 if (newIndex >= maxNewIndexSoFar) {
7445 maxNewIndexSoFar = newIndex;
7446 }
7447 else {
7448 moved = true;
7449 }
7450 patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7451 patched++;
7452 }
7453 }
7454 // 5.3 move and mount
7455 // generate longest stable subsequence only when nodes have moved
7456 const increasingNewIndexSequence = moved
7457 ? getSequence(newIndexToOldIndexMap)
7458 : EMPTY_ARR;
7459 j = increasingNewIndexSequence.length - 1;
7460 // looping backwards so that we can use last patched node as anchor
7461 for (i = toBePatched - 1; i >= 0; i--) {
7462 const nextIndex = s2 + i;
7463 const nextChild = c2[nextIndex];
7464 const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;
7465 if (newIndexToOldIndexMap[i] === 0) {
7466 // mount new
7467 patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7468 }
7469 else if (moved) {
7470 // move if:
7471 // There is no stable subsequence (e.g. a reverse)
7472 // OR current node is not among the stable sequence
7473 if (j < 0 || i !== increasingNewIndexSequence[j]) {
7474 move(nextChild, container, anchor, 2 /* MoveType.REORDER */);
7475 }
7476 else {
7477 j--;
7478 }
7479 }
7480 }
7481 }
7482 };
7483 const move = (vnode, container, anchor, moveType, parentSuspense = null) => {
7484 const { el, type, transition, children, shapeFlag } = vnode;
7485 if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
7486 move(vnode.component.subTree, container, anchor, moveType);
7487 return;
7488 }
7489 if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
7490 vnode.suspense.move(container, anchor, moveType);
7491 return;
7492 }
7493 if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
7494 type.move(vnode, container, anchor, internals);
7495 return;
7496 }
7497 if (type === Fragment) {
7498 hostInsert(el, container, anchor);
7499 for (let i = 0; i < children.length; i++) {
7500 move(children[i], container, anchor, moveType);
7501 }
7502 hostInsert(vnode.anchor, container, anchor);
7503 return;
7504 }
7505 if (type === Static) {
7506 moveStaticNode(vnode, container, anchor);
7507 return;
7508 }
7509 // single nodes
7510 const needTransition = moveType !== 2 /* MoveType.REORDER */ &&
7511 shapeFlag & 1 /* ShapeFlags.ELEMENT */ &&
7512 transition;
7513 if (needTransition) {
7514 if (moveType === 0 /* MoveType.ENTER */) {
7515 transition.beforeEnter(el);
7516 hostInsert(el, container, anchor);
7517 queuePostRenderEffect(() => transition.enter(el), parentSuspense);
7518 }
7519 else {
7520 const { leave, delayLeave, afterLeave } = transition;
7521 const remove = () => hostInsert(el, container, anchor);
7522 const performLeave = () => {
7523 leave(el, () => {
7524 remove();
7525 afterLeave && afterLeave();
7526 });
7527 };
7528 if (delayLeave) {
7529 delayLeave(el, remove, performLeave);
7530 }
7531 else {
7532 performLeave();
7533 }
7534 }
7535 }
7536 else {
7537 hostInsert(el, container, anchor);
7538 }
7539 };
7540 const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {
7541 const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;
7542 // unset ref
7543 if (ref != null) {
7544 setRef(ref, null, parentSuspense, vnode, true);
7545 }
7546 if (shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */) {
7547 parentComponent.ctx.deactivate(vnode);
7548 return;
7549 }
7550 const shouldInvokeDirs = shapeFlag & 1 /* ShapeFlags.ELEMENT */ && dirs;
7551 const shouldInvokeVnodeHook = !isAsyncWrapper(vnode);
7552 let vnodeHook;
7553 if (shouldInvokeVnodeHook &&
7554 (vnodeHook = props && props.onVnodeBeforeUnmount)) {
7555 invokeVNodeHook(vnodeHook, parentComponent, vnode);
7556 }
7557 if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
7558 unmountComponent(vnode.component, parentSuspense, doRemove);
7559 }
7560 else {
7561 if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
7562 vnode.suspense.unmount(parentSuspense, doRemove);
7563 return;
7564 }
7565 if (shouldInvokeDirs) {
7566 invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');
7567 }
7568 if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
7569 vnode.type.remove(vnode, parentComponent, parentSuspense, optimized, internals, doRemove);
7570 }
7571 else if (dynamicChildren &&
7572 // #1153: fast path should not be taken for non-stable (v-for) fragments
7573 (type !== Fragment ||
7574 (patchFlag > 0 && patchFlag & 64 /* PatchFlags.STABLE_FRAGMENT */))) {
7575 // fast path for block nodes: only need to unmount dynamic children.
7576 unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);
7577 }
7578 else if ((type === Fragment &&
7579 patchFlag &
7580 (128 /* PatchFlags.KEYED_FRAGMENT */ | 256 /* PatchFlags.UNKEYED_FRAGMENT */)) ||
7581 (!optimized && shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */)) {
7582 unmountChildren(children, parentComponent, parentSuspense);
7583 }
7584 if (doRemove) {
7585 remove(vnode);
7586 }
7587 }
7588 if ((shouldInvokeVnodeHook &&
7589 (vnodeHook = props && props.onVnodeUnmounted)) ||
7590 shouldInvokeDirs) {
7591 queuePostRenderEffect(() => {
7592 vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
7593 shouldInvokeDirs &&
7594 invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');
7595 }, parentSuspense);
7596 }
7597 };
7598 const remove = vnode => {
7599 const { type, el, anchor, transition } = vnode;
7600 if (type === Fragment) {
7601 if (vnode.patchFlag > 0 &&
7602 vnode.patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */ &&
7603 transition &&
7604 !transition.persisted) {
7605 vnode.children.forEach(child => {
7606 if (child.type === Comment) {
7607 hostRemove(child.el);
7608 }
7609 else {
7610 remove(child);
7611 }
7612 });
7613 }
7614 else {
7615 removeFragment(el, anchor);
7616 }
7617 return;
7618 }
7619 if (type === Static) {
7620 removeStaticNode(vnode);
7621 return;
7622 }
7623 const performRemove = () => {
7624 hostRemove(el);
7625 if (transition && !transition.persisted && transition.afterLeave) {
7626 transition.afterLeave();
7627 }
7628 };
7629 if (vnode.shapeFlag & 1 /* ShapeFlags.ELEMENT */ &&
7630 transition &&
7631 !transition.persisted) {
7632 const { leave, delayLeave } = transition;
7633 const performLeave = () => leave(el, performRemove);
7634 if (delayLeave) {
7635 delayLeave(vnode.el, performRemove, performLeave);
7636 }
7637 else {
7638 performLeave();
7639 }
7640 }
7641 else {
7642 performRemove();
7643 }
7644 };
7645 const removeFragment = (cur, end) => {
7646 // For fragments, directly remove all contained DOM nodes.
7647 // (fragment child nodes cannot have transition)
7648 let next;
7649 while (cur !== end) {
7650 next = hostNextSibling(cur);
7651 hostRemove(cur);
7652 cur = next;
7653 }
7654 hostRemove(end);
7655 };
7656 const unmountComponent = (instance, parentSuspense, doRemove) => {
7657 if (instance.type.__hmrId) {
7658 unregisterHMR(instance);
7659 }
7660 const { bum, scope, update, subTree, um } = instance;
7661 // beforeUnmount hook
7662 if (bum) {
7663 invokeArrayFns(bum);
7664 }
7665 // stop effects in component scope
7666 scope.stop();
7667 // update may be null if a component is unmounted before its async
7668 // setup has resolved.
7669 if (update) {
7670 // so that scheduler will no longer invoke it
7671 update.active = false;
7672 unmount(subTree, instance, parentSuspense, doRemove);
7673 }
7674 // unmounted hook
7675 if (um) {
7676 queuePostRenderEffect(um, parentSuspense);
7677 }
7678 queuePostRenderEffect(() => {
7679 instance.isUnmounted = true;
7680 }, parentSuspense);
7681 // A component with async dep inside a pending suspense is unmounted before
7682 // its async dep resolves. This should remove the dep from the suspense, and
7683 // cause the suspense to resolve immediately if that was the last dep.
7684 if (parentSuspense &&
7685 parentSuspense.pendingBranch &&
7686 !parentSuspense.isUnmounted &&
7687 instance.asyncDep &&
7688 !instance.asyncResolved &&
7689 instance.suspenseId === parentSuspense.pendingId) {
7690 parentSuspense.deps--;
7691 if (parentSuspense.deps === 0) {
7692 parentSuspense.resolve();
7693 }
7694 }
7695 {
7696 devtoolsComponentRemoved(instance);
7697 }
7698 };
7699 const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => {
7700 for (let i = start; i < children.length; i++) {
7701 unmount(children[i], parentComponent, parentSuspense, doRemove, optimized);
7702 }
7703 };
7704 const getNextHostNode = vnode => {
7705 if (vnode.shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
7706 return getNextHostNode(vnode.component.subTree);
7707 }
7708 if (vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
7709 return vnode.suspense.next();
7710 }
7711 return hostNextSibling((vnode.anchor || vnode.el));
7712 };
7713 const render = (vnode, container, isSVG) => {
7714 if (vnode == null) {
7715 if (container._vnode) {
7716 unmount(container._vnode, null, null, true);
7717 }
7718 }
7719 else {
7720 patch(container._vnode || null, vnode, container, null, null, null, isSVG);
7721 }
7722 flushPreFlushCbs();
7723 flushPostFlushCbs();
7724 container._vnode = vnode;
7725 };
7726 const internals = {
7727 p: patch,
7728 um: unmount,
7729 m: move,
7730 r: remove,
7731 mt: mountComponent,
7732 mc: mountChildren,
7733 pc: patchChildren,
7734 pbc: patchBlockChildren,
7735 n: getNextHostNode,
7736 o: options
7737 };
7738 let hydrate;
7739 let hydrateNode;
7740 if (createHydrationFns) {
7741 [hydrate, hydrateNode] = createHydrationFns(internals);
7742 }
7743 return {
7744 render,
7745 hydrate,
7746 createApp: createAppAPI(render, hydrate)
7747 };
7748}
7749function toggleRecurse({ effect, update }, allowed) {
7750 effect.allowRecurse = update.allowRecurse = allowed;
7751}
7752/**
7753 * #1156
7754 * When a component is HMR-enabled, we need to make sure that all static nodes
7755 * inside a block also inherit the DOM element from the previous tree so that
7756 * HMR updates (which are full updates) can retrieve the element for patching.
7757 *
7758 * #2080
7759 * Inside keyed `template` fragment static children, if a fragment is moved,
7760 * the children will always be moved. Therefore, in order to ensure correct move
7761 * position, el should be inherited from previous nodes.
7762 */
7763function traverseStaticChildren(n1, n2, shallow = false) {
7764 const ch1 = n1.children;
7765 const ch2 = n2.children;
7766 if (isArray(ch1) && isArray(ch2)) {
7767 for (let i = 0; i < ch1.length; i++) {
7768 // this is only called in the optimized path so array children are
7769 // guaranteed to be vnodes
7770 const c1 = ch1[i];
7771 let c2 = ch2[i];
7772 if (c2.shapeFlag & 1 /* ShapeFlags.ELEMENT */ && !c2.dynamicChildren) {
7773 if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* PatchFlags.HYDRATE_EVENTS */) {
7774 c2 = ch2[i] = cloneIfMounted(ch2[i]);
7775 c2.el = c1.el;
7776 }
7777 if (!shallow)
7778 traverseStaticChildren(c1, c2);
7779 }
7780 // #6852 also inherit for text nodes
7781 if (c2.type === Text) {
7782 c2.el = c1.el;
7783 }
7784 // also inherit for comment nodes, but not placeholders (e.g. v-if which
7785 // would have received .el during block patch)
7786 if (c2.type === Comment && !c2.el) {
7787 c2.el = c1.el;
7788 }
7789 }
7790 }
7791}
7792// https://en.wikipedia.org/wiki/Longest_increasing_subsequence
7793function getSequence(arr) {
7794 const p = arr.slice();
7795 const result = [0];
7796 let i, j, u, v, c;
7797 const len = arr.length;
7798 for (i = 0; i < len; i++) {
7799 const arrI = arr[i];
7800 if (arrI !== 0) {
7801 j = result[result.length - 1];
7802 if (arr[j] < arrI) {
7803 p[i] = j;
7804 result.push(i);
7805 continue;
7806 }
7807 u = 0;
7808 v = result.length - 1;
7809 while (u < v) {
7810 c = (u + v) >> 1;
7811 if (arr[result[c]] < arrI) {
7812 u = c + 1;
7813 }
7814 else {
7815 v = c;
7816 }
7817 }
7818 if (arrI < arr[result[u]]) {
7819 if (u > 0) {
7820 p[i] = result[u - 1];
7821 }
7822 result[u] = i;
7823 }
7824 }
7825 }
7826 u = result.length;
7827 v = result[u - 1];
7828 while (u-- > 0) {
7829 result[u] = v;
7830 v = p[v];
7831 }
7832 return result;
7833}
7834
7835const isTeleport = (type) => type.__isTeleport;
7836const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === '');
7837const isTargetSVG = (target) => typeof SVGElement !== 'undefined' && target instanceof SVGElement;
7838const resolveTarget = (props, select) => {
7839 const targetSelector = props && props.to;
7840 if (isString(targetSelector)) {
7841 if (!select) {
7842 warn(`Current renderer does not support string target for Teleports. ` +
7843 `(missing querySelector renderer option)`);
7844 return null;
7845 }
7846 else {
7847 const target = select(targetSelector);
7848 if (!target) {
7849 warn(`Failed to locate Teleport target with selector "${targetSelector}". ` +
7850 `Note the target element must exist before the component is mounted - ` +
7851 `i.e. the target cannot be rendered by the component itself, and ` +
7852 `ideally should be outside of the entire Vue component tree.`);
7853 }
7854 return target;
7855 }
7856 }
7857 else {
7858 if (!targetSelector && !isTeleportDisabled(props)) {
7859 warn(`Invalid Teleport target: ${targetSelector}`);
7860 }
7861 return targetSelector;
7862 }
7863};
7864const TeleportImpl = {
7865 __isTeleport: true,
7866 process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) {
7867 const { mc: mountChildren, pc: patchChildren, pbc: patchBlockChildren, o: { insert, querySelector, createText, createComment } } = internals;
7868 const disabled = isTeleportDisabled(n2.props);
7869 let { shapeFlag, children, dynamicChildren } = n2;
7870 // #3302
7871 // HMR updated, force full diff
7872 if (isHmrUpdating) {
7873 optimized = false;
7874 dynamicChildren = null;
7875 }
7876 if (n1 == null) {
7877 // insert anchors in the main view
7878 const placeholder = (n2.el = createComment('teleport start')
7879 );
7880 const mainAnchor = (n2.anchor = createComment('teleport end')
7881 );
7882 insert(placeholder, container, anchor);
7883 insert(mainAnchor, container, anchor);
7884 const target = (n2.target = resolveTarget(n2.props, querySelector));
7885 const targetAnchor = (n2.targetAnchor = createText(''));
7886 if (target) {
7887 insert(targetAnchor, target);
7888 // #2652 we could be teleporting from a non-SVG tree into an SVG tree
7889 isSVG = isSVG || isTargetSVG(target);
7890 }
7891 else if (!disabled) {
7892 warn('Invalid Teleport target on mount:', target, `(${typeof target})`);
7893 }
7894 const mount = (container, anchor) => {
7895 // Teleport *always* has Array children. This is enforced in both the
7896 // compiler and vnode children normalization.
7897 if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7898 mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
7899 }
7900 };
7901 if (disabled) {
7902 mount(container, mainAnchor);
7903 }
7904 else if (target) {
7905 mount(target, targetAnchor);
7906 }
7907 }
7908 else {
7909 // update content
7910 n2.el = n1.el;
7911 const mainAnchor = (n2.anchor = n1.anchor);
7912 const target = (n2.target = n1.target);
7913 const targetAnchor = (n2.targetAnchor = n1.targetAnchor);
7914 const wasDisabled = isTeleportDisabled(n1.props);
7915 const currentContainer = wasDisabled ? container : target;
7916 const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
7917 isSVG = isSVG || isTargetSVG(target);
7918 if (dynamicChildren) {
7919 // fast path when the teleport happens to be a block root
7920 patchBlockChildren(n1.dynamicChildren, dynamicChildren, currentContainer, parentComponent, parentSuspense, isSVG, slotScopeIds);
7921 // even in block tree mode we need to make sure all root-level nodes
7922 // in the teleport inherit previous DOM references so that they can
7923 // be moved in future patches.
7924 traverseStaticChildren(n1, n2, true);
7925 }
7926 else if (!optimized) {
7927 patchChildren(n1, n2, currentContainer, currentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, false);
7928 }
7929 if (disabled) {
7930 if (!wasDisabled) {
7931 // enabled -> disabled
7932 // move into main container
7933 moveTeleport(n2, container, mainAnchor, internals, 1 /* TeleportMoveTypes.TOGGLE */);
7934 }
7935 }
7936 else {
7937 // target changed
7938 if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
7939 const nextTarget = (n2.target = resolveTarget(n2.props, querySelector));
7940 if (nextTarget) {
7941 moveTeleport(n2, nextTarget, null, internals, 0 /* TeleportMoveTypes.TARGET_CHANGE */);
7942 }
7943 else {
7944 warn('Invalid Teleport target on update:', target, `(${typeof target})`);
7945 }
7946 }
7947 else if (wasDisabled) {
7948 // disabled -> enabled
7949 // move into teleport target
7950 moveTeleport(n2, target, targetAnchor, internals, 1 /* TeleportMoveTypes.TOGGLE */);
7951 }
7952 }
7953 }
7954 updateCssVars(n2);
7955 },
7956 remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) {
7957 const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode;
7958 if (target) {
7959 hostRemove(targetAnchor);
7960 }
7961 // an unmounted teleport should always remove its children if not disabled
7962 if (doRemove || !isTeleportDisabled(props)) {
7963 hostRemove(anchor);
7964 if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7965 for (let i = 0; i < children.length; i++) {
7966 const child = children[i];
7967 unmount(child, parentComponent, parentSuspense, true, !!child.dynamicChildren);
7968 }
7969 }
7970 }
7971 },
7972 move: moveTeleport,
7973 hydrate: hydrateTeleport
7974};
7975function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2 /* TeleportMoveTypes.REORDER */) {
7976 // move target anchor if this is a target change.
7977 if (moveType === 0 /* TeleportMoveTypes.TARGET_CHANGE */) {
7978 insert(vnode.targetAnchor, container, parentAnchor);
7979 }
7980 const { el, anchor, shapeFlag, children, props } = vnode;
7981 const isReorder = moveType === 2 /* TeleportMoveTypes.REORDER */;
7982 // move main view anchor if this is a re-order.
7983 if (isReorder) {
7984 insert(el, container, parentAnchor);
7985 }
7986 // if this is a re-order and teleport is enabled (content is in target)
7987 // do not move children. So the opposite is: only move children if this
7988 // is not a reorder, or the teleport is disabled
7989 if (!isReorder || isTeleportDisabled(props)) {
7990 // Teleport has either Array children or no children.
7991 if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
7992 for (let i = 0; i < children.length; i++) {
7993 move(children[i], container, parentAnchor, 2 /* MoveType.REORDER */);
7994 }
7995 }
7996 }
7997 // move main view anchor if this is a re-order.
7998 if (isReorder) {
7999 insert(anchor, container, parentAnchor);
8000 }
8001}
8002function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, { o: { nextSibling, parentNode, querySelector } }, hydrateChildren) {
8003 const target = (vnode.target = resolveTarget(vnode.props, querySelector));
8004 if (target) {
8005 // if multiple teleports rendered to the same target element, we need to
8006 // pick up from where the last teleport finished instead of the first node
8007 const targetNode = target._lpa || target.firstChild;
8008 if (vnode.shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
8009 if (isTeleportDisabled(vnode.props)) {
8010 vnode.anchor = hydrateChildren(nextSibling(node), vnode, parentNode(node), parentComponent, parentSuspense, slotScopeIds, optimized);
8011 vnode.targetAnchor = targetNode;
8012 }
8013 else {
8014 vnode.anchor = nextSibling(node);
8015 // lookahead until we find the target anchor
8016 // we cannot rely on return value of hydrateChildren() because there
8017 // could be nested teleports
8018 let targetAnchor = targetNode;
8019 while (targetAnchor) {
8020 targetAnchor = nextSibling(targetAnchor);
8021 if (targetAnchor &&
8022 targetAnchor.nodeType === 8 &&
8023 targetAnchor.data === 'teleport anchor') {
8024 vnode.targetAnchor = targetAnchor;
8025 target._lpa =
8026 vnode.targetAnchor && nextSibling(vnode.targetAnchor);
8027 break;
8028 }
8029 }
8030 hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
8031 }
8032 }
8033 updateCssVars(vnode);
8034 }
8035 return vnode.anchor && nextSibling(vnode.anchor);
8036}
8037// Force-casted public typing for h and TSX props inference
8038const Teleport = TeleportImpl;
8039function updateCssVars(vnode) {
8040 // presence of .ut method indicates owner component uses css vars.
8041 // code path here can assume browser environment.
8042 const ctx = vnode.ctx;
8043 if (ctx && ctx.ut) {
8044 let node = vnode.children[0].el;
8045 while (node !== vnode.targetAnchor) {
8046 if (node.nodeType === 1)
8047 node.setAttribute('data-v-owner', ctx.uid);
8048 node = node.nextSibling;
8049 }
8050 ctx.ut();
8051 }
8052}
8053
8054const Fragment = Symbol('Fragment' );
8055const Text = Symbol('Text' );
8056const Comment = Symbol('Comment' );
8057const Static = Symbol('Static' );
8058// Since v-if and v-for are the two possible ways node structure can dynamically
8059// change, once we consider v-if branches and each v-for fragment a block, we
8060// can divide a template into nested blocks, and within each block the node
8061// structure would be stable. This allows us to skip most children diffing
8062// and only worry about the dynamic nodes (indicated by patch flags).
8063const blockStack = [];
8064let currentBlock = null;
8065/**
8066 * Open a block.
8067 * This must be called before `createBlock`. It cannot be part of `createBlock`
8068 * because the children of the block are evaluated before `createBlock` itself
8069 * is called. The generated code typically looks like this:
8070 *
8071 * ```js
8072 * function render() {
8073 * return (openBlock(),createBlock('div', null, [...]))
8074 * }
8075 * ```
8076 * disableTracking is true when creating a v-for fragment block, since a v-for
8077 * fragment always diffs its children.
8078 *
8079 * @private
8080 */
8081function openBlock(disableTracking = false) {
8082 blockStack.push((currentBlock = disableTracking ? null : []));
8083}
8084function closeBlock() {
8085 blockStack.pop();
8086 currentBlock = blockStack[blockStack.length - 1] || null;
8087}
8088// Whether we should be tracking dynamic child nodes inside a block.
8089// Only tracks when this value is > 0
8090// We are not using a simple boolean because this value may need to be
8091// incremented/decremented by nested usage of v-once (see below)
8092let isBlockTreeEnabled = 1;
8093/**
8094 * Block tracking sometimes needs to be disabled, for example during the
8095 * creation of a tree that needs to be cached by v-once. The compiler generates
8096 * code like this:
8097 *
8098 * ``` js
8099 * _cache[1] || (
8100 * setBlockTracking(-1),
8101 * _cache[1] = createVNode(...),
8102 * setBlockTracking(1),
8103 * _cache[1]
8104 * )
8105 * ```
8106 *
8107 * @private
8108 */
8109function setBlockTracking(value) {
8110 isBlockTreeEnabled += value;
8111}
8112function setupBlock(vnode) {
8113 // save current block children on the block vnode
8114 vnode.dynamicChildren =
8115 isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null;
8116 // close block
8117 closeBlock();
8118 // a block is always going to be patched, so track it as a child of its
8119 // parent block
8120 if (isBlockTreeEnabled > 0 && currentBlock) {
8121 currentBlock.push(vnode);
8122 }
8123 return vnode;
8124}
8125/**
8126 * @private
8127 */
8128function createElementBlock(type, props, children, patchFlag, dynamicProps, shapeFlag) {
8129 return setupBlock(createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, true /* isBlock */));
8130}
8131/**
8132 * Create a block root vnode. Takes the same exact arguments as `createVNode`.
8133 * A block root keeps track of dynamic nodes within the block in the
8134 * `dynamicChildren` array.
8135 *
8136 * @private
8137 */
8138function createBlock(type, props, children, patchFlag, dynamicProps) {
8139 return setupBlock(createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: prevent a block from tracking itself */));
8140}
8141function isVNode(value) {
8142 return value ? value.__v_isVNode === true : false;
8143}
8144function isSameVNodeType(n1, n2) {
8145 if (n2.shapeFlag & 6 /* ShapeFlags.COMPONENT */ &&
8146 hmrDirtyComponents.has(n2.type)) {
8147 // #7042, ensure the vnode being unmounted during HMR
8148 // bitwise operations to remove keep alive flags
8149 n1.shapeFlag &= ~256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
8150 n2.shapeFlag &= ~512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
8151 // HMR only: if the component has been hot-updated, force a reload.
8152 return false;
8153 }
8154 return n1.type === n2.type && n1.key === n2.key;
8155}
8156let vnodeArgsTransformer;
8157/**
8158 * Internal API for registering an arguments transform for createVNode
8159 * used for creating stubs in the test-utils
8160 * It is *internal* but needs to be exposed for test-utils to pick up proper
8161 * typings
8162 */
8163function transformVNodeArgs(transformer) {
8164 vnodeArgsTransformer = transformer;
8165}
8166const createVNodeWithArgsTransform = (...args) => {
8167 return _createVNode(...(vnodeArgsTransformer
8168 ? vnodeArgsTransformer(args, currentRenderingInstance)
8169 : args));
8170};
8171const InternalObjectKey = `__vInternal`;
8172const normalizeKey = ({ key }) => key != null ? key : null;
8173const normalizeRef = ({ ref, ref_key, ref_for }) => {
8174 return (ref != null
8175 ? isString(ref) || isRef(ref) || isFunction(ref)
8176 ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for }
8177 : ref
8178 : null);
8179};
8180function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1 /* ShapeFlags.ELEMENT */, isBlockNode = false, needFullChildrenNormalization = false) {
8181 const vnode = {
8182 __v_isVNode: true,
8183 __v_skip: true,
8184 type,
8185 props,
8186 key: props && normalizeKey(props),
8187 ref: props && normalizeRef(props),
8188 scopeId: currentScopeId,
8189 slotScopeIds: null,
8190 children,
8191 component: null,
8192 suspense: null,
8193 ssContent: null,
8194 ssFallback: null,
8195 dirs: null,
8196 transition: null,
8197 el: null,
8198 anchor: null,
8199 target: null,
8200 targetAnchor: null,
8201 staticCount: 0,
8202 shapeFlag,
8203 patchFlag,
8204 dynamicProps,
8205 dynamicChildren: null,
8206 appContext: null,
8207 ctx: currentRenderingInstance
8208 };
8209 if (needFullChildrenNormalization) {
8210 normalizeChildren(vnode, children);
8211 // normalize suspense children
8212 if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
8213 type.normalize(vnode);
8214 }
8215 }
8216 else if (children) {
8217 // compiled element vnode - if children is passed, only possible types are
8218 // string or Array.
8219 vnode.shapeFlag |= isString(children)
8220 ? 8 /* ShapeFlags.TEXT_CHILDREN */
8221 : 16 /* ShapeFlags.ARRAY_CHILDREN */;
8222 }
8223 // validate key
8224 if (vnode.key !== vnode.key) {
8225 warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);
8226 }
8227 // track vnode for block tree
8228 if (isBlockTreeEnabled > 0 &&
8229 // avoid a block node from tracking itself
8230 !isBlockNode &&
8231 // has current parent block
8232 currentBlock &&
8233 // presence of a patch flag indicates this node needs patching on updates.
8234 // component nodes also should always be patched, because even if the
8235 // component doesn't need to update, it needs to persist the instance on to
8236 // the next vnode so that it can be properly unmounted later.
8237 (vnode.patchFlag > 0 || shapeFlag & 6 /* ShapeFlags.COMPONENT */) &&
8238 // the EVENTS flag is only for hydration and if it is the only flag, the
8239 // vnode should not be considered dynamic due to handler caching.
8240 vnode.patchFlag !== 32 /* PatchFlags.HYDRATE_EVENTS */) {
8241 currentBlock.push(vnode);
8242 }
8243 return vnode;
8244}
8245const createVNode = (createVNodeWithArgsTransform );
8246function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {
8247 if (!type || type === NULL_DYNAMIC_COMPONENT) {
8248 if (!type) {
8249 warn(`Invalid vnode type when creating vnode: ${type}.`);
8250 }
8251 type = Comment;
8252 }
8253 if (isVNode(type)) {
8254 // createVNode receiving an existing vnode. This happens in cases like
8255 // <component :is="vnode"/>
8256 // #2078 make sure to merge refs during the clone instead of overwriting it
8257 const cloned = cloneVNode(type, props, true /* mergeRef: true */);
8258 if (children) {
8259 normalizeChildren(cloned, children);
8260 }
8261 if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock) {
8262 if (cloned.shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
8263 currentBlock[currentBlock.indexOf(type)] = cloned;
8264 }
8265 else {
8266 currentBlock.push(cloned);
8267 }
8268 }
8269 cloned.patchFlag |= -2 /* PatchFlags.BAIL */;
8270 return cloned;
8271 }
8272 // class component normalization.
8273 if (isClassComponent(type)) {
8274 type = type.__vccOpts;
8275 }
8276 // class & style normalization.
8277 if (props) {
8278 // for reactive or proxy objects, we need to clone it to enable mutation.
8279 props = guardReactiveProps(props);
8280 let { class: klass, style } = props;
8281 if (klass && !isString(klass)) {
8282 props.class = normalizeClass(klass);
8283 }
8284 if (isObject(style)) {
8285 // reactive state objects need to be cloned since they are likely to be
8286 // mutated
8287 if (isProxy(style) && !isArray(style)) {
8288 style = extend({}, style);
8289 }
8290 props.style = normalizeStyle(style);
8291 }
8292 }
8293 // encode the vnode type information into a bitmap
8294 const shapeFlag = isString(type)
8295 ? 1 /* ShapeFlags.ELEMENT */
8296 : isSuspense(type)
8297 ? 128 /* ShapeFlags.SUSPENSE */
8298 : isTeleport(type)
8299 ? 64 /* ShapeFlags.TELEPORT */
8300 : isObject(type)
8301 ? 4 /* ShapeFlags.STATEFUL_COMPONENT */
8302 : isFunction(type)
8303 ? 2 /* ShapeFlags.FUNCTIONAL_COMPONENT */
8304 : 0;
8305 if (shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */ && isProxy(type)) {
8306 type = toRaw(type);
8307 warn(`Vue received a Component which was made a reactive object. This can ` +
8308 `lead to unnecessary performance overhead, and should be avoided by ` +
8309 `marking the component with \`markRaw\` or using \`shallowRef\` ` +
8310 `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);
8311 }
8312 return createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, isBlockNode, true);
8313}
8314function guardReactiveProps(props) {
8315 if (!props)
8316 return null;
8317 return isProxy(props) || InternalObjectKey in props
8318 ? extend({}, props)
8319 : props;
8320}
8321function cloneVNode(vnode, extraProps, mergeRef = false) {
8322 // This is intentionally NOT using spread or extend to avoid the runtime
8323 // key enumeration cost.
8324 const { props, ref, patchFlag, children } = vnode;
8325 const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;
8326 const cloned = {
8327 __v_isVNode: true,
8328 __v_skip: true,
8329 type: vnode.type,
8330 props: mergedProps,
8331 key: mergedProps && normalizeKey(mergedProps),
8332 ref: extraProps && extraProps.ref
8333 ? // #2078 in the case of <component :is="vnode" ref="extra"/>
8334 // if the vnode itself already has a ref, cloneVNode will need to merge
8335 // the refs so the single vnode can be set on multiple refs
8336 mergeRef && ref
8337 ? isArray(ref)
8338 ? ref.concat(normalizeRef(extraProps))
8339 : [ref, normalizeRef(extraProps)]
8340 : normalizeRef(extraProps)
8341 : ref,
8342 scopeId: vnode.scopeId,
8343 slotScopeIds: vnode.slotScopeIds,
8344 children: patchFlag === -1 /* PatchFlags.HOISTED */ && isArray(children)
8345 ? children.map(deepCloneVNode)
8346 : children,
8347 target: vnode.target,
8348 targetAnchor: vnode.targetAnchor,
8349 staticCount: vnode.staticCount,
8350 shapeFlag: vnode.shapeFlag,
8351 // if the vnode is cloned with extra props, we can no longer assume its
8352 // existing patch flag to be reliable and need to add the FULL_PROPS flag.
8353 // note: preserve flag for fragments since they use the flag for children
8354 // fast paths only.
8355 patchFlag: extraProps && vnode.type !== Fragment
8356 ? patchFlag === -1 // hoisted node
8357 ? 16 /* PatchFlags.FULL_PROPS */
8358 : patchFlag | 16 /* PatchFlags.FULL_PROPS */
8359 : patchFlag,
8360 dynamicProps: vnode.dynamicProps,
8361 dynamicChildren: vnode.dynamicChildren,
8362 appContext: vnode.appContext,
8363 dirs: vnode.dirs,
8364 transition: vnode.transition,
8365 // These should technically only be non-null on mounted VNodes. However,
8366 // they *should* be copied for kept-alive vnodes. So we just always copy
8367 // them since them being non-null during a mount doesn't affect the logic as
8368 // they will simply be overwritten.
8369 component: vnode.component,
8370 suspense: vnode.suspense,
8371 ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
8372 ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
8373 el: vnode.el,
8374 anchor: vnode.anchor,
8375 ctx: vnode.ctx,
8376 ce: vnode.ce
8377 };
8378 return cloned;
8379}
8380/**
8381 * Dev only, for HMR of hoisted vnodes reused in v-for
8382 * https://github.com/vitejs/vite/issues/2022
8383 */
8384function deepCloneVNode(vnode) {
8385 const cloned = cloneVNode(vnode);
8386 if (isArray(vnode.children)) {
8387 cloned.children = vnode.children.map(deepCloneVNode);
8388 }
8389 return cloned;
8390}
8391/**
8392 * @private
8393 */
8394function createTextVNode(text = ' ', flag = 0) {
8395 return createVNode(Text, null, text, flag);
8396}
8397/**
8398 * @private
8399 */
8400function createStaticVNode(content, numberOfNodes) {
8401 // A static vnode can contain multiple stringified elements, and the number
8402 // of elements is necessary for hydration.
8403 const vnode = createVNode(Static, null, content);
8404 vnode.staticCount = numberOfNodes;
8405 return vnode;
8406}
8407/**
8408 * @private
8409 */
8410function createCommentVNode(text = '',
8411// when used as the v-else branch, the comment node must be created as a
8412// block to ensure correct updates.
8413asBlock = false) {
8414 return asBlock
8415 ? (openBlock(), createBlock(Comment, null, text))
8416 : createVNode(Comment, null, text);
8417}
8418function normalizeVNode(child) {
8419 if (child == null || typeof child === 'boolean') {
8420 // empty placeholder
8421 return createVNode(Comment);
8422 }
8423 else if (isArray(child)) {
8424 // fragment
8425 return createVNode(Fragment, null,
8426 // #3666, avoid reference pollution when reusing vnode
8427 child.slice());
8428 }
8429 else if (typeof child === 'object') {
8430 // already vnode, this should be the most common since compiled templates
8431 // always produce all-vnode children arrays
8432 return cloneIfMounted(child);
8433 }
8434 else {
8435 // strings and numbers
8436 return createVNode(Text, null, String(child));
8437 }
8438}
8439// optimized normalization for template-compiled render fns
8440function cloneIfMounted(child) {
8441 return (child.el === null && child.patchFlag !== -1 /* PatchFlags.HOISTED */) ||
8442 child.memo
8443 ? child
8444 : cloneVNode(child);
8445}
8446function normalizeChildren(vnode, children) {
8447 let type = 0;
8448 const { shapeFlag } = vnode;
8449 if (children == null) {
8450 children = null;
8451 }
8452 else if (isArray(children)) {
8453 type = 16 /* ShapeFlags.ARRAY_CHILDREN */;
8454 }
8455 else if (typeof children === 'object') {
8456 if (shapeFlag & (1 /* ShapeFlags.ELEMENT */ | 64 /* ShapeFlags.TELEPORT */)) {
8457 // Normalize slot to plain children for plain element and Teleport
8458 const slot = children.default;
8459 if (slot) {
8460 // _c marker is added by withCtx() indicating this is a compiled slot
8461 slot._c && (slot._d = false);
8462 normalizeChildren(vnode, slot());
8463 slot._c && (slot._d = true);
8464 }
8465 return;
8466 }
8467 else {
8468 type = 32 /* ShapeFlags.SLOTS_CHILDREN */;
8469 const slotFlag = children._;
8470 if (!slotFlag && !(InternalObjectKey in children)) {
8471 children._ctx = currentRenderingInstance;
8472 }
8473 else if (slotFlag === 3 /* SlotFlags.FORWARDED */ && currentRenderingInstance) {
8474 // a child component receives forwarded slots from the parent.
8475 // its slot type is determined by its parent's slot type.
8476 if (currentRenderingInstance.slots._ === 1 /* SlotFlags.STABLE */) {
8477 children._ = 1 /* SlotFlags.STABLE */;
8478 }
8479 else {
8480 children._ = 2 /* SlotFlags.DYNAMIC */;
8481 vnode.patchFlag |= 1024 /* PatchFlags.DYNAMIC_SLOTS */;
8482 }
8483 }
8484 }
8485 }
8486 else if (isFunction(children)) {
8487 children = { default: children, _ctx: currentRenderingInstance };
8488 type = 32 /* ShapeFlags.SLOTS_CHILDREN */;
8489 }
8490 else {
8491 children = String(children);
8492 // force teleport children to array so it can be moved around
8493 if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
8494 type = 16 /* ShapeFlags.ARRAY_CHILDREN */;
8495 children = [createTextVNode(children)];
8496 }
8497 else {
8498 type = 8 /* ShapeFlags.TEXT_CHILDREN */;
8499 }
8500 }
8501 vnode.children = children;
8502 vnode.shapeFlag |= type;
8503}
8504function mergeProps(...args) {
8505 const ret = {};
8506 for (let i = 0; i < args.length; i++) {
8507 const toMerge = args[i];
8508 for (const key in toMerge) {
8509 if (key === 'class') {
8510 if (ret.class !== toMerge.class) {
8511 ret.class = normalizeClass([ret.class, toMerge.class]);
8512 }
8513 }
8514 else if (key === 'style') {
8515 ret.style = normalizeStyle([ret.style, toMerge.style]);
8516 }
8517 else if (isOn(key)) {
8518 const existing = ret[key];
8519 const incoming = toMerge[key];
8520 if (incoming &&
8521 existing !== incoming &&
8522 !(isArray(existing) && existing.includes(incoming))) {
8523 ret[key] = existing
8524 ? [].concat(existing, incoming)
8525 : incoming;
8526 }
8527 }
8528 else if (key !== '') {
8529 ret[key] = toMerge[key];
8530 }
8531 }
8532 }
8533 return ret;
8534}
8535function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
8536 callWithAsyncErrorHandling(hook, instance, 7 /* ErrorCodes.VNODE_HOOK */, [
8537 vnode,
8538 prevVNode
8539 ]);
8540}
8541
8542const emptyAppContext = createAppContext();
8543let uid = 0;
8544function createComponentInstance(vnode, parent, suspense) {
8545 const type = vnode.type;
8546 // inherit parent app context - or - if root, adopt from root vnode
8547 const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
8548 const instance = {
8549 uid: uid++,
8550 vnode,
8551 type,
8552 parent,
8553 appContext,
8554 root: null,
8555 next: null,
8556 subTree: null,
8557 effect: null,
8558 update: null,
8559 scope: new EffectScope(true /* detached */),
8560 render: null,
8561 proxy: null,
8562 exposed: null,
8563 exposeProxy: null,
8564 withProxy: null,
8565 provides: parent ? parent.provides : Object.create(appContext.provides),
8566 accessCache: null,
8567 renderCache: [],
8568 // local resolved assets
8569 components: null,
8570 directives: null,
8571 // resolved props and emits options
8572 propsOptions: normalizePropsOptions(type, appContext),
8573 emitsOptions: normalizeEmitsOptions(type, appContext),
8574 // emit
8575 emit: null,
8576 emitted: null,
8577 // props default value
8578 propsDefaults: EMPTY_OBJ,
8579 // inheritAttrs
8580 inheritAttrs: type.inheritAttrs,
8581 // state
8582 ctx: EMPTY_OBJ,
8583 data: EMPTY_OBJ,
8584 props: EMPTY_OBJ,
8585 attrs: EMPTY_OBJ,
8586 slots: EMPTY_OBJ,
8587 refs: EMPTY_OBJ,
8588 setupState: EMPTY_OBJ,
8589 setupContext: null,
8590 // suspense related
8591 suspense,
8592 suspenseId: suspense ? suspense.pendingId : 0,
8593 asyncDep: null,
8594 asyncResolved: false,
8595 // lifecycle hooks
8596 // not using enums here because it results in computed properties
8597 isMounted: false,
8598 isUnmounted: false,
8599 isDeactivated: false,
8600 bc: null,
8601 c: null,
8602 bm: null,
8603 m: null,
8604 bu: null,
8605 u: null,
8606 um: null,
8607 bum: null,
8608 da: null,
8609 a: null,
8610 rtg: null,
8611 rtc: null,
8612 ec: null,
8613 sp: null
8614 };
8615 {
8616 instance.ctx = createDevRenderContext(instance);
8617 }
8618 instance.root = parent ? parent.root : instance;
8619 instance.emit = emit.bind(null, instance);
8620 // apply custom element special handling
8621 if (vnode.ce) {
8622 vnode.ce(instance);
8623 }
8624 return instance;
8625}
8626let currentInstance = null;
8627const getCurrentInstance = () => currentInstance || currentRenderingInstance;
8628const setCurrentInstance = (instance) => {
8629 currentInstance = instance;
8630 instance.scope.on();
8631};
8632const unsetCurrentInstance = () => {
8633 currentInstance && currentInstance.scope.off();
8634 currentInstance = null;
8635};
8636const isBuiltInTag = /*#__PURE__*/ makeMap('slot,component');
8637function validateComponentName(name, config) {
8638 const appIsNativeTag = config.isNativeTag || NO;
8639 if (isBuiltInTag(name) || appIsNativeTag(name)) {
8640 warn('Do not use built-in or reserved HTML elements as component id: ' + name);
8641 }
8642}
8643function isStatefulComponent(instance) {
8644 return instance.vnode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */;
8645}
8646let isInSSRComponentSetup = false;
8647function setupComponent(instance, isSSR = false) {
8648 isInSSRComponentSetup = isSSR;
8649 const { props, children } = instance.vnode;
8650 const isStateful = isStatefulComponent(instance);
8651 initProps(instance, props, isStateful, isSSR);
8652 initSlots(instance, children);
8653 const setupResult = isStateful
8654 ? setupStatefulComponent(instance, isSSR)
8655 : undefined;
8656 isInSSRComponentSetup = false;
8657 return setupResult;
8658}
8659function setupStatefulComponent(instance, isSSR) {
8660 var _a;
8661 const Component = instance.type;
8662 {
8663 if (Component.name) {
8664 validateComponentName(Component.name, instance.appContext.config);
8665 }
8666 if (Component.components) {
8667 const names = Object.keys(Component.components);
8668 for (let i = 0; i < names.length; i++) {
8669 validateComponentName(names[i], instance.appContext.config);
8670 }
8671 }
8672 if (Component.directives) {
8673 const names = Object.keys(Component.directives);
8674 for (let i = 0; i < names.length; i++) {
8675 validateDirectiveName(names[i]);
8676 }
8677 }
8678 if (Component.compilerOptions && isRuntimeOnly()) {
8679 warn(`"compilerOptions" is only supported when using a build of Vue that ` +
8680 `includes the runtime compiler. Since you are using a runtime-only ` +
8681 `build, the options should be passed via your build tool config instead.`);
8682 }
8683 }
8684 // 0. create render proxy property access cache
8685 instance.accessCache = Object.create(null);
8686 // 1. create public instance / render proxy
8687 // also mark it raw so it's never observed
8688 instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers));
8689 {
8690 exposePropsOnRenderContext(instance);
8691 }
8692 // 2. call setup()
8693 const { setup } = Component;
8694 if (setup) {
8695 const setupContext = (instance.setupContext =
8696 setup.length > 1 ? createSetupContext(instance) : null);
8697 setCurrentInstance(instance);
8698 pauseTracking();
8699 const setupResult = callWithErrorHandling(setup, instance, 0 /* ErrorCodes.SETUP_FUNCTION */, [shallowReadonly(instance.props) , setupContext]);
8700 resetTracking();
8701 unsetCurrentInstance();
8702 if (isPromise(setupResult)) {
8703 setupResult.then(unsetCurrentInstance, unsetCurrentInstance);
8704 if (isSSR) {
8705 // return the promise so server-renderer can wait on it
8706 return setupResult
8707 .then((resolvedResult) => {
8708 handleSetupResult(instance, resolvedResult, isSSR);
8709 })
8710 .catch(e => {
8711 handleError(e, instance, 0 /* ErrorCodes.SETUP_FUNCTION */);
8712 });
8713 }
8714 else {
8715 // async setup returned Promise.
8716 // bail here and wait for re-entry.
8717 instance.asyncDep = setupResult;
8718 if (!instance.suspense) {
8719 const name = (_a = Component.name) !== null && _a !== void 0 ? _a : 'Anonymous';
8720 warn(`Component <${name}>: setup function returned a promise, but no ` +
8721 `<Suspense> boundary was found in the parent component tree. ` +
8722 `A component with async setup() must be nested in a <Suspense> ` +
8723 `in order to be rendered.`);
8724 }
8725 }
8726 }
8727 else {
8728 handleSetupResult(instance, setupResult, isSSR);
8729 }
8730 }
8731 else {
8732 finishComponentSetup(instance, isSSR);
8733 }
8734}
8735function handleSetupResult(instance, setupResult, isSSR) {
8736 if (isFunction(setupResult)) {
8737 // setup returned an inline render function
8738 {
8739 instance.render = setupResult;
8740 }
8741 }
8742 else if (isObject(setupResult)) {
8743 if (isVNode(setupResult)) {
8744 warn(`setup() should not return VNodes directly - ` +
8745 `return a render function instead.`);
8746 }
8747 // setup returned bindings.
8748 // assuming a render function compiled from template is present.
8749 {
8750 instance.devtoolsRawSetupState = setupResult;
8751 }
8752 instance.setupState = proxyRefs(setupResult);
8753 {
8754 exposeSetupStateOnRenderContext(instance);
8755 }
8756 }
8757 else if (setupResult !== undefined) {
8758 warn(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`);
8759 }
8760 finishComponentSetup(instance, isSSR);
8761}
8762let compile$1;
8763let installWithProxy;
8764/**
8765 * For runtime-dom to register the compiler.
8766 * Note the exported method uses any to avoid d.ts relying on the compiler types.
8767 */
8768function registerRuntimeCompiler(_compile) {
8769 compile$1 = _compile;
8770 installWithProxy = i => {
8771 if (i.render._rc) {
8772 i.withProxy = new Proxy(i.ctx, RuntimeCompiledPublicInstanceProxyHandlers);
8773 }
8774 };
8775}
8776// dev only
8777const isRuntimeOnly = () => !compile$1;
8778function finishComponentSetup(instance, isSSR, skipOptions) {
8779 const Component = instance.type;
8780 // template / render function normalization
8781 // could be already set when returned from setup()
8782 if (!instance.render) {
8783 // only do on-the-fly compile if not in SSR - SSR on-the-fly compilation
8784 // is done by server-renderer
8785 if (!isSSR && compile$1 && !Component.render) {
8786 const template = Component.template ||
8787 resolveMergedOptions(instance).template;
8788 if (template) {
8789 {
8790 startMeasure(instance, `compile`);
8791 }
8792 const { isCustomElement, compilerOptions } = instance.appContext.config;
8793 const { delimiters, compilerOptions: componentCompilerOptions } = Component;
8794 const finalCompilerOptions = extend(extend({
8795 isCustomElement,
8796 delimiters
8797 }, compilerOptions), componentCompilerOptions);
8798 Component.render = compile$1(template, finalCompilerOptions);
8799 {
8800 endMeasure(instance, `compile`);
8801 }
8802 }
8803 }
8804 instance.render = (Component.render || NOOP);
8805 // for runtime-compiled render functions using `with` blocks, the render
8806 // proxy used needs a different `has` handler which is more performant and
8807 // also only allows a whitelist of globals to fallthrough.
8808 if (installWithProxy) {
8809 installWithProxy(instance);
8810 }
8811 }
8812 // support for 2.x options
8813 {
8814 setCurrentInstance(instance);
8815 pauseTracking();
8816 applyOptions(instance);
8817 resetTracking();
8818 unsetCurrentInstance();
8819 }
8820 // warn missing template/render
8821 // the runtime compilation of template in SSR is done by server-render
8822 if (!Component.render && instance.render === NOOP && !isSSR) {
8823 /* istanbul ignore if */
8824 if (!compile$1 && Component.template) {
8825 warn(`Component provided template option but ` +
8826 `runtime compilation is not supported in this build of Vue.` +
8827 (` Use "vue.esm-browser.js" instead.`
8828 ) /* should not happen */);
8829 }
8830 else {
8831 warn(`Component is missing template or render function.`);
8832 }
8833 }
8834}
8835function createAttrsProxy(instance) {
8836 return new Proxy(instance.attrs, {
8837 get(target, key) {
8838 markAttrsAccessed();
8839 track(instance, "get" /* TrackOpTypes.GET */, '$attrs');
8840 return target[key];
8841 },
8842 set() {
8843 warn(`setupContext.attrs is readonly.`);
8844 return false;
8845 },
8846 deleteProperty() {
8847 warn(`setupContext.attrs is readonly.`);
8848 return false;
8849 }
8850 }
8851 );
8852}
8853function createSetupContext(instance) {
8854 const expose = exposed => {
8855 {
8856 if (instance.exposed) {
8857 warn(`expose() should be called only once per setup().`);
8858 }
8859 if (exposed != null) {
8860 let exposedType = typeof exposed;
8861 if (exposedType === 'object') {
8862 if (isArray(exposed)) {
8863 exposedType = 'array';
8864 }
8865 else if (isRef(exposed)) {
8866 exposedType = 'ref';
8867 }
8868 }
8869 if (exposedType !== 'object') {
8870 warn(`expose() should be passed a plain object, received ${exposedType}.`);
8871 }
8872 }
8873 }
8874 instance.exposed = exposed || {};
8875 };
8876 let attrs;
8877 {
8878 // We use getters in dev in case libs like test-utils overwrite instance
8879 // properties (overwrites should not be done in prod)
8880 return Object.freeze({
8881 get attrs() {
8882 return attrs || (attrs = createAttrsProxy(instance));
8883 },
8884 get slots() {
8885 return shallowReadonly(instance.slots);
8886 },
8887 get emit() {
8888 return (event, ...args) => instance.emit(event, ...args);
8889 },
8890 expose
8891 });
8892 }
8893}
8894function getExposeProxy(instance) {
8895 if (instance.exposed) {
8896 return (instance.exposeProxy ||
8897 (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
8898 get(target, key) {
8899 if (key in target) {
8900 return target[key];
8901 }
8902 else if (key in publicPropertiesMap) {
8903 return publicPropertiesMap[key](instance);
8904 }
8905 },
8906 has(target, key) {
8907 return key in target || key in publicPropertiesMap;
8908 }
8909 })));
8910 }
8911}
8912const classifyRE = /(?:^|[-_])(\w)/g;
8913const classify = (str) => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
8914function getComponentName(Component, includeInferred = true) {
8915 return isFunction(Component)
8916 ? Component.displayName || Component.name
8917 : Component.name || (includeInferred && Component.__name);
8918}
8919/* istanbul ignore next */
8920function formatComponentName(instance, Component, isRoot = false) {
8921 let name = getComponentName(Component);
8922 if (!name && Component.__file) {
8923 const match = Component.__file.match(/([^/\\]+)\.\w+$/);
8924 if (match) {
8925 name = match[1];
8926 }
8927 }
8928 if (!name && instance && instance.parent) {
8929 // try to infer the name based on reverse resolution
8930 const inferFromRegistry = (registry) => {
8931 for (const key in registry) {
8932 if (registry[key] === Component) {
8933 return key;
8934 }
8935 }
8936 };
8937 name =
8938 inferFromRegistry(instance.components ||
8939 instance.parent.type.components) || inferFromRegistry(instance.appContext.components);
8940 }
8941 return name ? classify(name) : isRoot ? `App` : `Anonymous`;
8942}
8943function isClassComponent(value) {
8944 return isFunction(value) && '__vccOpts' in value;
8945}
8946
8947const computed = ((getterOrOptions, debugOptions) => {
8948 // @ts-ignore
8949 return computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
8950});
8951
8952// dev only
8953const warnRuntimeUsage = (method) => warn(`${method}() is a compiler-hint helper that is only usable inside ` +
8954 `<script setup> of a single file component. Its arguments should be ` +
8955 `compiled away and passing it at runtime has no effect.`);
8956// implementation
8957function defineProps() {
8958 {
8959 warnRuntimeUsage(`defineProps`);
8960 }
8961 return null;
8962}
8963// implementation
8964function defineEmits() {
8965 {
8966 warnRuntimeUsage(`defineEmits`);
8967 }
8968 return null;
8969}
8970/**
8971 * Vue `<script setup>` compiler macro for declaring a component's exposed
8972 * instance properties when it is accessed by a parent component via template
8973 * refs.
8974 *
8975 * `<script setup>` components are closed by default - i.e. variables inside
8976 * the `<script setup>` scope is not exposed to parent unless explicitly exposed
8977 * via `defineExpose`.
8978 *
8979 * This is only usable inside `<script setup>`, is compiled away in the
8980 * output and should **not** be actually called at runtime.
8981 */
8982function defineExpose(exposed) {
8983 {
8984 warnRuntimeUsage(`defineExpose`);
8985 }
8986}
8987/**
8988 * Vue `<script setup>` compiler macro for providing props default values when
8989 * using type-based `defineProps` declaration.
8990 *
8991 * Example usage:
8992 * ```ts
8993 * withDefaults(defineProps<{
8994 * size?: number
8995 * labels?: string[]
8996 * }>(), {
8997 * size: 3,
8998 * labels: () => ['default label']
8999 * })
9000 * ```
9001 *
9002 * This is only usable inside `<script setup>`, is compiled away in the output
9003 * and should **not** be actually called at runtime.
9004 */
9005function withDefaults(props, defaults) {
9006 {
9007 warnRuntimeUsage(`withDefaults`);
9008 }
9009 return null;
9010}
9011function useSlots() {
9012 return getContext().slots;
9013}
9014function useAttrs() {
9015 return getContext().attrs;
9016}
9017function getContext() {
9018 const i = getCurrentInstance();
9019 if (!i) {
9020 warn(`useContext() called without active instance.`);
9021 }
9022 return i.setupContext || (i.setupContext = createSetupContext(i));
9023}
9024/**
9025 * Runtime helper for merging default declarations. Imported by compiled code
9026 * only.
9027 * @internal
9028 */
9029function mergeDefaults(raw, defaults) {
9030 const props = isArray(raw)
9031 ? raw.reduce((normalized, p) => ((normalized[p] = {}), normalized), {})
9032 : raw;
9033 for (const key in defaults) {
9034 const opt = props[key];
9035 if (opt) {
9036 if (isArray(opt) || isFunction(opt)) {
9037 props[key] = { type: opt, default: defaults[key] };
9038 }
9039 else {
9040 opt.default = defaults[key];
9041 }
9042 }
9043 else if (opt === null) {
9044 props[key] = { default: defaults[key] };
9045 }
9046 else {
9047 warn(`props default key "${key}" has no corresponding declaration.`);
9048 }
9049 }
9050 return props;
9051}
9052/**
9053 * Used to create a proxy for the rest element when destructuring props with
9054 * defineProps().
9055 * @internal
9056 */
9057function createPropsRestProxy(props, excludedKeys) {
9058 const ret = {};
9059 for (const key in props) {
9060 if (!excludedKeys.includes(key)) {
9061 Object.defineProperty(ret, key, {
9062 enumerable: true,
9063 get: () => props[key]
9064 });
9065 }
9066 }
9067 return ret;
9068}
9069/**
9070 * `<script setup>` helper for persisting the current instance context over
9071 * async/await flows.
9072 *
9073 * `@vue/compiler-sfc` converts the following:
9074 *
9075 * ```ts
9076 * const x = await foo()
9077 * ```
9078 *
9079 * into:
9080 *
9081 * ```ts
9082 * let __temp, __restore
9083 * const x = (([__temp, __restore] = withAsyncContext(() => foo())),__temp=await __temp,__restore(),__temp)
9084 * ```
9085 * @internal
9086 */
9087function withAsyncContext(getAwaitable) {
9088 const ctx = getCurrentInstance();
9089 if (!ctx) {
9090 warn(`withAsyncContext called without active current instance. ` +
9091 `This is likely a bug.`);
9092 }
9093 let awaitable = getAwaitable();
9094 unsetCurrentInstance();
9095 if (isPromise(awaitable)) {
9096 awaitable = awaitable.catch(e => {
9097 setCurrentInstance(ctx);
9098 throw e;
9099 });
9100 }
9101 return [awaitable, () => setCurrentInstance(ctx)];
9102}
9103
9104// Actual implementation
9105function h(type, propsOrChildren, children) {
9106 const l = arguments.length;
9107 if (l === 2) {
9108 if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
9109 // single vnode without props
9110 if (isVNode(propsOrChildren)) {
9111 return createVNode(type, null, [propsOrChildren]);
9112 }
9113 // props without children
9114 return createVNode(type, propsOrChildren);
9115 }
9116 else {
9117 // omit props
9118 return createVNode(type, null, propsOrChildren);
9119 }
9120 }
9121 else {
9122 if (l > 3) {
9123 children = Array.prototype.slice.call(arguments, 2);
9124 }
9125 else if (l === 3 && isVNode(children)) {
9126 children = [children];
9127 }
9128 return createVNode(type, propsOrChildren, children);
9129 }
9130}
9131
9132const ssrContextKey = Symbol(`ssrContext` );
9133const useSSRContext = () => {
9134 {
9135 const ctx = inject(ssrContextKey);
9136 if (!ctx) {
9137 warn(`Server rendering context not provided. Make sure to only call ` +
9138 `useSSRContext() conditionally in the server build.`);
9139 }
9140 return ctx;
9141 }
9142};
9143
9144function initCustomFormatter() {
9145 /* eslint-disable no-restricted-globals */
9146 if (typeof window === 'undefined') {
9147 return;
9148 }
9149 const vueStyle = { style: 'color:#3ba776' };
9150 const numberStyle = { style: 'color:#0b1bc9' };
9151 const stringStyle = { style: 'color:#b62e24' };
9152 const keywordStyle = { style: 'color:#9d288c' };
9153 // custom formatter for Chrome
9154 // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
9155 const formatter = {
9156 header(obj) {
9157 // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
9158 if (!isObject(obj)) {
9159 return null;
9160 }
9161 if (obj.__isVue) {
9162 return ['div', vueStyle, `VueInstance`];
9163 }
9164 else if (isRef(obj)) {
9165 return [
9166 'div',
9167 {},
9168 ['span', vueStyle, genRefFlag(obj)],
9169 '<',
9170 formatValue(obj.value),
9171 `>`
9172 ];
9173 }
9174 else if (isReactive(obj)) {
9175 return [
9176 'div',
9177 {},
9178 ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
9179 '<',
9180 formatValue(obj),
9181 `>${isReadonly(obj) ? ` (readonly)` : ``}`
9182 ];
9183 }
9184 else if (isReadonly(obj)) {
9185 return [
9186 'div',
9187 {},
9188 ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
9189 '<',
9190 formatValue(obj),
9191 '>'
9192 ];
9193 }
9194 return null;
9195 },
9196 hasBody(obj) {
9197 return obj && obj.__isVue;
9198 },
9199 body(obj) {
9200 if (obj && obj.__isVue) {
9201 return [
9202 'div',
9203 {},
9204 ...formatInstance(obj.$)
9205 ];
9206 }
9207 }
9208 };
9209 function formatInstance(instance) {
9210 const blocks = [];
9211 if (instance.type.props && instance.props) {
9212 blocks.push(createInstanceBlock('props', toRaw(instance.props)));
9213 }
9214 if (instance.setupState !== EMPTY_OBJ) {
9215 blocks.push(createInstanceBlock('setup', instance.setupState));
9216 }
9217 if (instance.data !== EMPTY_OBJ) {
9218 blocks.push(createInstanceBlock('data', toRaw(instance.data)));
9219 }
9220 const computed = extractKeys(instance, 'computed');
9221 if (computed) {
9222 blocks.push(createInstanceBlock('computed', computed));
9223 }
9224 const injected = extractKeys(instance, 'inject');
9225 if (injected) {
9226 blocks.push(createInstanceBlock('injected', injected));
9227 }
9228 blocks.push([
9229 'div',
9230 {},
9231 [
9232 'span',
9233 {
9234 style: keywordStyle.style + ';opacity:0.66'
9235 },
9236 '$ (internal): '
9237 ],
9238 ['object', { object: instance }]
9239 ]);
9240 return blocks;
9241 }
9242 function createInstanceBlock(type, target) {
9243 target = extend({}, target);
9244 if (!Object.keys(target).length) {
9245 return ['span', {}];
9246 }
9247 return [
9248 'div',
9249 { style: 'line-height:1.25em;margin-bottom:0.6em' },
9250 [
9251 'div',
9252 {
9253 style: 'color:#476582'
9254 },
9255 type
9256 ],
9257 [
9258 'div',
9259 {
9260 style: 'padding-left:1.25em'
9261 },
9262 ...Object.keys(target).map(key => {
9263 return [
9264 'div',
9265 {},
9266 ['span', keywordStyle, key + ': '],
9267 formatValue(target[key], false)
9268 ];
9269 })
9270 ]
9271 ];
9272 }
9273 function formatValue(v, asRaw = true) {
9274 if (typeof v === 'number') {
9275 return ['span', numberStyle, v];
9276 }
9277 else if (typeof v === 'string') {
9278 return ['span', stringStyle, JSON.stringify(v)];
9279 }
9280 else if (typeof v === 'boolean') {
9281 return ['span', keywordStyle, v];
9282 }
9283 else if (isObject(v)) {
9284 return ['object', { object: asRaw ? toRaw(v) : v }];
9285 }
9286 else {
9287 return ['span', stringStyle, String(v)];
9288 }
9289 }
9290 function extractKeys(instance, type) {
9291 const Comp = instance.type;
9292 if (isFunction(Comp)) {
9293 return;
9294 }
9295 const extracted = {};
9296 for (const key in instance.ctx) {
9297 if (isKeyOfType(Comp, key, type)) {
9298 extracted[key] = instance.ctx[key];
9299 }
9300 }
9301 return extracted;
9302 }
9303 function isKeyOfType(Comp, key, type) {
9304 const opts = Comp[type];
9305 if ((isArray(opts) && opts.includes(key)) ||
9306 (isObject(opts) && key in opts)) {
9307 return true;
9308 }
9309 if (Comp.extends && isKeyOfType(Comp.extends, key, type)) {
9310 return true;
9311 }
9312 if (Comp.mixins && Comp.mixins.some(m => isKeyOfType(m, key, type))) {
9313 return true;
9314 }
9315 }
9316 function genRefFlag(v) {
9317 if (isShallow(v)) {
9318 return `ShallowRef`;
9319 }
9320 if (v.effect) {
9321 return `ComputedRef`;
9322 }
9323 return `Ref`;
9324 }
9325 if (window.devtoolsFormatters) {
9326 window.devtoolsFormatters.push(formatter);
9327 }
9328 else {
9329 window.devtoolsFormatters = [formatter];
9330 }
9331}
9332
9333function withMemo(memo, render, cache, index) {
9334 const cached = cache[index];
9335 if (cached && isMemoSame(cached, memo)) {
9336 return cached;
9337 }
9338 const ret = render();
9339 // shallow clone
9340 ret.memo = memo.slice();
9341 return (cache[index] = ret);
9342}
9343function isMemoSame(cached, memo) {
9344 const prev = cached.memo;
9345 if (prev.length != memo.length) {
9346 return false;
9347 }
9348 for (let i = 0; i < prev.length; i++) {
9349 if (hasChanged(prev[i], memo[i])) {
9350 return false;
9351 }
9352 }
9353 // make sure to let parent block track it when returning cached
9354 if (isBlockTreeEnabled > 0 && currentBlock) {
9355 currentBlock.push(cached);
9356 }
9357 return true;
9358}
9359
9360// Core API ------------------------------------------------------------------
9361const version = "3.2.47";
9362/**
9363 * SSR utils for \@vue/server-renderer. Only exposed in ssr-possible builds.
9364 * @internal
9365 */
9366const ssrUtils = (null);
9367/**
9368 * @internal only exposed in compat builds
9369 */
9370const resolveFilter = null;
9371/**
9372 * @internal only exposed in compat builds.
9373 */
9374const compatUtils = (null);
9375
9376const svgNS = 'http://www.w3.org/2000/svg';
9377const doc = (typeof document !== 'undefined' ? document : null);
9378const templateContainer = doc && /*#__PURE__*/ doc.createElement('template');
9379const nodeOps = {
9380 insert: (child, parent, anchor) => {
9381 parent.insertBefore(child, anchor || null);
9382 },
9383 remove: child => {
9384 const parent = child.parentNode;
9385 if (parent) {
9386 parent.removeChild(child);
9387 }
9388 },
9389 createElement: (tag, isSVG, is, props) => {
9390 const el = isSVG
9391 ? doc.createElementNS(svgNS, tag)
9392 : doc.createElement(tag, is ? { is } : undefined);
9393 if (tag === 'select' && props && props.multiple != null) {
9394 el.setAttribute('multiple', props.multiple);
9395 }
9396 return el;
9397 },
9398 createText: text => doc.createTextNode(text),
9399 createComment: text => doc.createComment(text),
9400 setText: (node, text) => {
9401 node.nodeValue = text;
9402 },
9403 setElementText: (el, text) => {
9404 el.textContent = text;
9405 },
9406 parentNode: node => node.parentNode,
9407 nextSibling: node => node.nextSibling,
9408 querySelector: selector => doc.querySelector(selector),
9409 setScopeId(el, id) {
9410 el.setAttribute(id, '');
9411 },
9412 // __UNSAFE__
9413 // Reason: innerHTML.
9414 // Static content here can only come from compiled templates.
9415 // As long as the user only uses trusted templates, this is safe.
9416 insertStaticContent(content, parent, anchor, isSVG, start, end) {
9417 // <parent> before | first ... last | anchor </parent>
9418 const before = anchor ? anchor.previousSibling : parent.lastChild;
9419 // #5308 can only take cached path if:
9420 // - has a single root node
9421 // - nextSibling info is still available
9422 if (start && (start === end || start.nextSibling)) {
9423 // cached
9424 while (true) {
9425 parent.insertBefore(start.cloneNode(true), anchor);
9426 if (start === end || !(start = start.nextSibling))
9427 break;
9428 }
9429 }
9430 else {
9431 // fresh insert
9432 templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content;
9433 const template = templateContainer.content;
9434 if (isSVG) {
9435 // remove outer svg wrapper
9436 const wrapper = template.firstChild;
9437 while (wrapper.firstChild) {
9438 template.appendChild(wrapper.firstChild);
9439 }
9440 template.removeChild(wrapper);
9441 }
9442 parent.insertBefore(template, anchor);
9443 }
9444 return [
9445 // first
9446 before ? before.nextSibling : parent.firstChild,
9447 // last
9448 anchor ? anchor.previousSibling : parent.lastChild
9449 ];
9450 }
9451};
9452
9453// compiler should normalize class + :class bindings on the same element
9454// into a single binding ['staticClass', dynamic]
9455function patchClass(el, value, isSVG) {
9456 // directly setting className should be faster than setAttribute in theory
9457 // if this is an element during a transition, take the temporary transition
9458 // classes into account.
9459 const transitionClasses = el._vtc;
9460 if (transitionClasses) {
9461 value = (value ? [value, ...transitionClasses] : [...transitionClasses]).join(' ');
9462 }
9463 if (value == null) {
9464 el.removeAttribute('class');
9465 }
9466 else if (isSVG) {
9467 el.setAttribute('class', value);
9468 }
9469 else {
9470 el.className = value;
9471 }
9472}
9473
9474function patchStyle(el, prev, next) {
9475 const style = el.style;
9476 const isCssString = isString(next);
9477 if (next && !isCssString) {
9478 if (prev && !isString(prev)) {
9479 for (const key in prev) {
9480 if (next[key] == null) {
9481 setStyle(style, key, '');
9482 }
9483 }
9484 }
9485 for (const key in next) {
9486 setStyle(style, key, next[key]);
9487 }
9488 }
9489 else {
9490 const currentDisplay = style.display;
9491 if (isCssString) {
9492 if (prev !== next) {
9493 style.cssText = next;
9494 }
9495 }
9496 else if (prev) {
9497 el.removeAttribute('style');
9498 }
9499 // indicates that the `display` of the element is controlled by `v-show`,
9500 // so we always keep the current `display` value regardless of the `style`
9501 // value, thus handing over control to `v-show`.
9502 if ('_vod' in el) {
9503 style.display = currentDisplay;
9504 }
9505 }
9506}
9507const semicolonRE = /[^\\];\s*$/;
9508const importantRE = /\s*!important$/;
9509function setStyle(style, name, val) {
9510 if (isArray(val)) {
9511 val.forEach(v => setStyle(style, name, v));
9512 }
9513 else {
9514 if (val == null)
9515 val = '';
9516 {
9517 if (semicolonRE.test(val)) {
9518 warn(`Unexpected semicolon at the end of '${name}' style value: '${val}'`);
9519 }
9520 }
9521 if (name.startsWith('--')) {
9522 // custom property definition
9523 style.setProperty(name, val);
9524 }
9525 else {
9526 const prefixed = autoPrefix(style, name);
9527 if (importantRE.test(val)) {
9528 // !important
9529 style.setProperty(hyphenate(prefixed), val.replace(importantRE, ''), 'important');
9530 }
9531 else {
9532 style[prefixed] = val;
9533 }
9534 }
9535 }
9536}
9537const prefixes = ['Webkit', 'Moz', 'ms'];
9538const prefixCache = {};
9539function autoPrefix(style, rawName) {
9540 const cached = prefixCache[rawName];
9541 if (cached) {
9542 return cached;
9543 }
9544 let name = camelize(rawName);
9545 if (name !== 'filter' && name in style) {
9546 return (prefixCache[rawName] = name);
9547 }
9548 name = capitalize(name);
9549 for (let i = 0; i < prefixes.length; i++) {
9550 const prefixed = prefixes[i] + name;
9551 if (prefixed in style) {
9552 return (prefixCache[rawName] = prefixed);
9553 }
9554 }
9555 return rawName;
9556}
9557
9558const xlinkNS = 'http://www.w3.org/1999/xlink';
9559function patchAttr(el, key, value, isSVG, instance) {
9560 if (isSVG && key.startsWith('xlink:')) {
9561 if (value == null) {
9562 el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
9563 }
9564 else {
9565 el.setAttributeNS(xlinkNS, key, value);
9566 }
9567 }
9568 else {
9569 // note we are only checking boolean attributes that don't have a
9570 // corresponding dom prop of the same name here.
9571 const isBoolean = isSpecialBooleanAttr(key);
9572 if (value == null || (isBoolean && !includeBooleanAttr(value))) {
9573 el.removeAttribute(key);
9574 }
9575 else {
9576 el.setAttribute(key, isBoolean ? '' : value);
9577 }
9578 }
9579}
9580
9581// __UNSAFE__
9582// functions. The user is responsible for using them with only trusted content.
9583function patchDOMProp(el, key, value,
9584// the following args are passed only due to potential innerHTML/textContent
9585// overriding existing VNodes, in which case the old tree must be properly
9586// unmounted.
9587prevChildren, parentComponent, parentSuspense, unmountChildren) {
9588 if (key === 'innerHTML' || key === 'textContent') {
9589 if (prevChildren) {
9590 unmountChildren(prevChildren, parentComponent, parentSuspense);
9591 }
9592 el[key] = value == null ? '' : value;
9593 return;
9594 }
9595 if (key === 'value' &&
9596 el.tagName !== 'PROGRESS' &&
9597 // custom elements may use _value internally
9598 !el.tagName.includes('-')) {
9599 // store value as _value as well since
9600 // non-string values will be stringified.
9601 el._value = value;
9602 const newValue = value == null ? '' : value;
9603 if (el.value !== newValue ||
9604 // #4956: always set for OPTION elements because its value falls back to
9605 // textContent if no value attribute is present. And setting .value for
9606 // OPTION has no side effect
9607 el.tagName === 'OPTION') {
9608 el.value = newValue;
9609 }
9610 if (value == null) {
9611 el.removeAttribute(key);
9612 }
9613 return;
9614 }
9615 let needRemove = false;
9616 if (value === '' || value == null) {
9617 const type = typeof el[key];
9618 if (type === 'boolean') {
9619 // e.g. <select multiple> compiles to { multiple: '' }
9620 value = includeBooleanAttr(value);
9621 }
9622 else if (value == null && type === 'string') {
9623 // e.g. <div :id="null">
9624 value = '';
9625 needRemove = true;
9626 }
9627 else if (type === 'number') {
9628 // e.g. <img :width="null">
9629 value = 0;
9630 needRemove = true;
9631 }
9632 }
9633 // some properties perform value validation and throw,
9634 // some properties has getter, no setter, will error in 'use strict'
9635 // eg. <select :type="null"></select> <select :willValidate="null"></select>
9636 try {
9637 el[key] = value;
9638 }
9639 catch (e) {
9640 // do not warn if value is auto-coerced from nullish values
9641 if (!needRemove) {
9642 warn(`Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
9643 `value ${value} is invalid.`, e);
9644 }
9645 }
9646 needRemove && el.removeAttribute(key);
9647}
9648
9649function addEventListener(el, event, handler, options) {
9650 el.addEventListener(event, handler, options);
9651}
9652function removeEventListener(el, event, handler, options) {
9653 el.removeEventListener(event, handler, options);
9654}
9655function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
9656 // vei = vue event invokers
9657 const invokers = el._vei || (el._vei = {});
9658 const existingInvoker = invokers[rawName];
9659 if (nextValue && existingInvoker) {
9660 // patch
9661 existingInvoker.value = nextValue;
9662 }
9663 else {
9664 const [name, options] = parseName(rawName);
9665 if (nextValue) {
9666 // add
9667 const invoker = (invokers[rawName] = createInvoker(nextValue, instance));
9668 addEventListener(el, name, invoker, options);
9669 }
9670 else if (existingInvoker) {
9671 // remove
9672 removeEventListener(el, name, existingInvoker, options);
9673 invokers[rawName] = undefined;
9674 }
9675 }
9676}
9677const optionsModifierRE = /(?:Once|Passive|Capture)$/;
9678function parseName(name) {
9679 let options;
9680 if (optionsModifierRE.test(name)) {
9681 options = {};
9682 let m;
9683 while ((m = name.match(optionsModifierRE))) {
9684 name = name.slice(0, name.length - m[0].length);
9685 options[m[0].toLowerCase()] = true;
9686 }
9687 }
9688 const event = name[2] === ':' ? name.slice(3) : hyphenate(name.slice(2));
9689 return [event, options];
9690}
9691// To avoid the overhead of repeatedly calling Date.now(), we cache
9692// and use the same timestamp for all event listeners attached in the same tick.
9693let cachedNow = 0;
9694const p = /*#__PURE__*/ Promise.resolve();
9695const getNow = () => cachedNow || (p.then(() => (cachedNow = 0)), (cachedNow = Date.now()));
9696function createInvoker(initialValue, instance) {
9697 const invoker = (e) => {
9698 // async edge case vuejs/vue#6566
9699 // inner click event triggers patch, event handler
9700 // attached to outer element during patch, and triggered again. This
9701 // happens because browsers fire microtask ticks between event propagation.
9702 // this no longer happens for templates in Vue 3, but could still be
9703 // theoretically possible for hand-written render functions.
9704 // the solution: we save the timestamp when a handler is attached,
9705 // and also attach the timestamp to any event that was handled by vue
9706 // for the first time (to avoid inconsistent event timestamp implementations
9707 // or events fired from iframes, e.g. #2513)
9708 // The handler would only fire if the event passed to it was fired
9709 // AFTER it was attached.
9710 if (!e._vts) {
9711 e._vts = Date.now();
9712 }
9713 else if (e._vts <= invoker.attached) {
9714 return;
9715 }
9716 callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* ErrorCodes.NATIVE_EVENT_HANDLER */, [e]);
9717 };
9718 invoker.value = initialValue;
9719 invoker.attached = getNow();
9720 return invoker;
9721}
9722function patchStopImmediatePropagation(e, value) {
9723 if (isArray(value)) {
9724 const originalStop = e.stopImmediatePropagation;
9725 e.stopImmediatePropagation = () => {
9726 originalStop.call(e);
9727 e._stopped = true;
9728 };
9729 return value.map(fn => (e) => !e._stopped && fn && fn(e));
9730 }
9731 else {
9732 return value;
9733 }
9734}
9735
9736const nativeOnRE = /^on[a-z]/;
9737const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
9738 if (key === 'class') {
9739 patchClass(el, nextValue, isSVG);
9740 }
9741 else if (key === 'style') {
9742 patchStyle(el, prevValue, nextValue);
9743 }
9744 else if (isOn(key)) {
9745 // ignore v-model listeners
9746 if (!isModelListener(key)) {
9747 patchEvent(el, key, prevValue, nextValue, parentComponent);
9748 }
9749 }
9750 else if (key[0] === '.'
9751 ? ((key = key.slice(1)), true)
9752 : key[0] === '^'
9753 ? ((key = key.slice(1)), false)
9754 : shouldSetAsProp(el, key, nextValue, isSVG)) {
9755 patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren);
9756 }
9757 else {
9758 // special case for <input v-model type="checkbox"> with
9759 // :true-value & :false-value
9760 // store value as dom properties since non-string values will be
9761 // stringified.
9762 if (key === 'true-value') {
9763 el._trueValue = nextValue;
9764 }
9765 else if (key === 'false-value') {
9766 el._falseValue = nextValue;
9767 }
9768 patchAttr(el, key, nextValue, isSVG);
9769 }
9770};
9771function shouldSetAsProp(el, key, value, isSVG) {
9772 if (isSVG) {
9773 // most keys must be set as attribute on svg elements to work
9774 // ...except innerHTML & textContent
9775 if (key === 'innerHTML' || key === 'textContent') {
9776 return true;
9777 }
9778 // or native onclick with function values
9779 if (key in el && nativeOnRE.test(key) && isFunction(value)) {
9780 return true;
9781 }
9782 return false;
9783 }
9784 // these are enumerated attrs, however their corresponding DOM properties
9785 // are actually booleans - this leads to setting it with a string "false"
9786 // value leading it to be coerced to `true`, so we need to always treat
9787 // them as attributes.
9788 // Note that `contentEditable` doesn't have this problem: its DOM
9789 // property is also enumerated string values.
9790 if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
9791 return false;
9792 }
9793 // #1787, #2840 form property on form elements is readonly and must be set as
9794 // attribute.
9795 if (key === 'form') {
9796 return false;
9797 }
9798 // #1526 <input list> must be set as attribute
9799 if (key === 'list' && el.tagName === 'INPUT') {
9800 return false;
9801 }
9802 // #2766 <textarea type> must be set as attribute
9803 if (key === 'type' && el.tagName === 'TEXTAREA') {
9804 return false;
9805 }
9806 // native onclick with string value, must be set as attribute
9807 if (nativeOnRE.test(key) && isString(value)) {
9808 return false;
9809 }
9810 return key in el;
9811}
9812
9813function defineCustomElement(options, hydrate) {
9814 const Comp = defineComponent(options);
9815 class VueCustomElement extends VueElement {
9816 constructor(initialProps) {
9817 super(Comp, initialProps, hydrate);
9818 }
9819 }
9820 VueCustomElement.def = Comp;
9821 return VueCustomElement;
9822}
9823const defineSSRCustomElement = ((options) => {
9824 // @ts-ignore
9825 return defineCustomElement(options, hydrate);
9826});
9827const BaseClass = (typeof HTMLElement !== 'undefined' ? HTMLElement : class {
9828});
9829class VueElement extends BaseClass {
9830 constructor(_def, _props = {}, hydrate) {
9831 super();
9832 this._def = _def;
9833 this._props = _props;
9834 /**
9835 * @internal
9836 */
9837 this._instance = null;
9838 this._connected = false;
9839 this._resolved = false;
9840 this._numberProps = null;
9841 if (this.shadowRoot && hydrate) {
9842 hydrate(this._createVNode(), this.shadowRoot);
9843 }
9844 else {
9845 if (this.shadowRoot) {
9846 warn(`Custom element has pre-rendered declarative shadow root but is not ` +
9847 `defined as hydratable. Use \`defineSSRCustomElement\`.`);
9848 }
9849 this.attachShadow({ mode: 'open' });
9850 if (!this._def.__asyncLoader) {
9851 // for sync component defs we can immediately resolve props
9852 this._resolveProps(this._def);
9853 }
9854 }
9855 }
9856 connectedCallback() {
9857 this._connected = true;
9858 if (!this._instance) {
9859 if (this._resolved) {
9860 this._update();
9861 }
9862 else {
9863 this._resolveDef();
9864 }
9865 }
9866 }
9867 disconnectedCallback() {
9868 this._connected = false;
9869 nextTick(() => {
9870 if (!this._connected) {
9871 render(null, this.shadowRoot);
9872 this._instance = null;
9873 }
9874 });
9875 }
9876 /**
9877 * resolve inner component definition (handle possible async component)
9878 */
9879 _resolveDef() {
9880 this._resolved = true;
9881 // set initial attrs
9882 for (let i = 0; i < this.attributes.length; i++) {
9883 this._setAttr(this.attributes[i].name);
9884 }
9885 // watch future attr changes
9886 new MutationObserver(mutations => {
9887 for (const m of mutations) {
9888 this._setAttr(m.attributeName);
9889 }
9890 }).observe(this, { attributes: true });
9891 const resolve = (def, isAsync = false) => {
9892 const { props, styles } = def;
9893 // cast Number-type props set before resolve
9894 let numberProps;
9895 if (props && !isArray(props)) {
9896 for (const key in props) {
9897 const opt = props[key];
9898 if (opt === Number || (opt && opt.type === Number)) {
9899 if (key in this._props) {
9900 this._props[key] = toNumber(this._props[key]);
9901 }
9902 (numberProps || (numberProps = Object.create(null)))[camelize(key)] = true;
9903 }
9904 }
9905 }
9906 this._numberProps = numberProps;
9907 if (isAsync) {
9908 // defining getter/setters on prototype
9909 // for sync defs, this already happened in the constructor
9910 this._resolveProps(def);
9911 }
9912 // apply CSS
9913 this._applyStyles(styles);
9914 // initial render
9915 this._update();
9916 };
9917 const asyncDef = this._def.__asyncLoader;
9918 if (asyncDef) {
9919 asyncDef().then(def => resolve(def, true));
9920 }
9921 else {
9922 resolve(this._def);
9923 }
9924 }
9925 _resolveProps(def) {
9926 const { props } = def;
9927 const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
9928 // check if there are props set pre-upgrade or connect
9929 for (const key of Object.keys(this)) {
9930 if (key[0] !== '_' && declaredPropKeys.includes(key)) {
9931 this._setProp(key, this[key], true, false);
9932 }
9933 }
9934 // defining getter/setters on prototype
9935 for (const key of declaredPropKeys.map(camelize)) {
9936 Object.defineProperty(this, key, {
9937 get() {
9938 return this._getProp(key);
9939 },
9940 set(val) {
9941 this._setProp(key, val);
9942 }
9943 });
9944 }
9945 }
9946 _setAttr(key) {
9947 let value = this.getAttribute(key);
9948 const camelKey = camelize(key);
9949 if (this._numberProps && this._numberProps[camelKey]) {
9950 value = toNumber(value);
9951 }
9952 this._setProp(camelKey, value, false);
9953 }
9954 /**
9955 * @internal
9956 */
9957 _getProp(key) {
9958 return this._props[key];
9959 }
9960 /**
9961 * @internal
9962 */
9963 _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
9964 if (val !== this._props[key]) {
9965 this._props[key] = val;
9966 if (shouldUpdate && this._instance) {
9967 this._update();
9968 }
9969 // reflect
9970 if (shouldReflect) {
9971 if (val === true) {
9972 this.setAttribute(hyphenate(key), '');
9973 }
9974 else if (typeof val === 'string' || typeof val === 'number') {
9975 this.setAttribute(hyphenate(key), val + '');
9976 }
9977 else if (!val) {
9978 this.removeAttribute(hyphenate(key));
9979 }
9980 }
9981 }
9982 }
9983 _update() {
9984 render(this._createVNode(), this.shadowRoot);
9985 }
9986 _createVNode() {
9987 const vnode = createVNode(this._def, extend({}, this._props));
9988 if (!this._instance) {
9989 vnode.ce = instance => {
9990 this._instance = instance;
9991 instance.isCE = true;
9992 // HMR
9993 {
9994 instance.ceReload = newStyles => {
9995 // always reset styles
9996 if (this._styles) {
9997 this._styles.forEach(s => this.shadowRoot.removeChild(s));
9998 this._styles.length = 0;
9999 }
10000 this._applyStyles(newStyles);
10001 this._instance = null;
10002 this._update();
10003 };
10004 }
10005 const dispatch = (event, args) => {
10006 this.dispatchEvent(new CustomEvent(event, {
10007 detail: args
10008 }));
10009 };
10010 // intercept emit
10011 instance.emit = (event, ...args) => {
10012 // dispatch both the raw and hyphenated versions of an event
10013 // to match Vue behavior
10014 dispatch(event, args);
10015 if (hyphenate(event) !== event) {
10016 dispatch(hyphenate(event), args);
10017 }
10018 };
10019 // locate nearest Vue custom element parent for provide/inject
10020 let parent = this;
10021 while ((parent =
10022 parent && (parent.parentNode || parent.host))) {
10023 if (parent instanceof VueElement) {
10024 instance.parent = parent._instance;
10025 instance.provides = parent._instance.provides;
10026 break;
10027 }
10028 }
10029 };
10030 }
10031 return vnode;
10032 }
10033 _applyStyles(styles) {
10034 if (styles) {
10035 styles.forEach(css => {
10036 const s = document.createElement('style');
10037 s.textContent = css;
10038 this.shadowRoot.appendChild(s);
10039 // record for HMR
10040 {
10041 (this._styles || (this._styles = [])).push(s);
10042 }
10043 });
10044 }
10045 }
10046}
10047
10048function useCssModule(name = '$style') {
10049 /* istanbul ignore else */
10050 {
10051 const instance = getCurrentInstance();
10052 if (!instance) {
10053 warn(`useCssModule must be called inside setup()`);
10054 return EMPTY_OBJ;
10055 }
10056 const modules = instance.type.__cssModules;
10057 if (!modules) {
10058 warn(`Current instance does not have CSS modules injected.`);
10059 return EMPTY_OBJ;
10060 }
10061 const mod = modules[name];
10062 if (!mod) {
10063 warn(`Current instance does not have CSS module named "${name}".`);
10064 return EMPTY_OBJ;
10065 }
10066 return mod;
10067 }
10068}
10069
10070/**
10071 * Runtime helper for SFC's CSS variable injection feature.
10072 * @private
10073 */
10074function useCssVars(getter) {
10075 const instance = getCurrentInstance();
10076 /* istanbul ignore next */
10077 if (!instance) {
10078 warn(`useCssVars is called without current active component instance.`);
10079 return;
10080 }
10081 const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
10082 Array.from(document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)).forEach(node => setVarsOnNode(node, vars));
10083 });
10084 const setVars = () => {
10085 const vars = getter(instance.proxy);
10086 setVarsOnVNode(instance.subTree, vars);
10087 updateTeleports(vars);
10088 };
10089 watchPostEffect(setVars);
10090 onMounted(() => {
10091 const ob = new MutationObserver(setVars);
10092 ob.observe(instance.subTree.el.parentNode, { childList: true });
10093 onUnmounted(() => ob.disconnect());
10094 });
10095}
10096function setVarsOnVNode(vnode, vars) {
10097 if (vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
10098 const suspense = vnode.suspense;
10099 vnode = suspense.activeBranch;
10100 if (suspense.pendingBranch && !suspense.isHydrating) {
10101 suspense.effects.push(() => {
10102 setVarsOnVNode(suspense.activeBranch, vars);
10103 });
10104 }
10105 }
10106 // drill down HOCs until it's a non-component vnode
10107 while (vnode.component) {
10108 vnode = vnode.component.subTree;
10109 }
10110 if (vnode.shapeFlag & 1 /* ShapeFlags.ELEMENT */ && vnode.el) {
10111 setVarsOnNode(vnode.el, vars);
10112 }
10113 else if (vnode.type === Fragment) {
10114 vnode.children.forEach(c => setVarsOnVNode(c, vars));
10115 }
10116 else if (vnode.type === Static) {
10117 let { el, anchor } = vnode;
10118 while (el) {
10119 setVarsOnNode(el, vars);
10120 if (el === anchor)
10121 break;
10122 el = el.nextSibling;
10123 }
10124 }
10125}
10126function setVarsOnNode(el, vars) {
10127 if (el.nodeType === 1) {
10128 const style = el.style;
10129 for (const key in vars) {
10130 style.setProperty(`--${key}`, vars[key]);
10131 }
10132 }
10133}
10134
10135const TRANSITION = 'transition';
10136const ANIMATION = 'animation';
10137// DOM Transition is a higher-order-component based on the platform-agnostic
10138// base Transition component, with DOM-specific logic.
10139const Transition = (props, { slots }) => h(BaseTransition, resolveTransitionProps(props), slots);
10140Transition.displayName = 'Transition';
10141const DOMTransitionPropsValidators = {
10142 name: String,
10143 type: String,
10144 css: {
10145 type: Boolean,
10146 default: true
10147 },
10148 duration: [String, Number, Object],
10149 enterFromClass: String,
10150 enterActiveClass: String,
10151 enterToClass: String,
10152 appearFromClass: String,
10153 appearActiveClass: String,
10154 appearToClass: String,
10155 leaveFromClass: String,
10156 leaveActiveClass: String,
10157 leaveToClass: String
10158};
10159const TransitionPropsValidators = (Transition.props =
10160 /*#__PURE__*/ extend({}, BaseTransition.props, DOMTransitionPropsValidators));
10161/**
10162 * #3227 Incoming hooks may be merged into arrays when wrapping Transition
10163 * with custom HOCs.
10164 */
10165const callHook = (hook, args = []) => {
10166 if (isArray(hook)) {
10167 hook.forEach(h => h(...args));
10168 }
10169 else if (hook) {
10170 hook(...args);
10171 }
10172};
10173/**
10174 * Check if a hook expects a callback (2nd arg), which means the user
10175 * intends to explicitly control the end of the transition.
10176 */
10177const hasExplicitCallback = (hook) => {
10178 return hook
10179 ? isArray(hook)
10180 ? hook.some(h => h.length > 1)
10181 : hook.length > 1
10182 : false;
10183};
10184function resolveTransitionProps(rawProps) {
10185 const baseProps = {};
10186 for (const key in rawProps) {
10187 if (!(key in DOMTransitionPropsValidators)) {
10188 baseProps[key] = rawProps[key];
10189 }
10190 }
10191 if (rawProps.css === false) {
10192 return baseProps;
10193 }
10194 const { name = 'v', type, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps;
10195 const durations = normalizeDuration(duration);
10196 const enterDuration = durations && durations[0];
10197 const leaveDuration = durations && durations[1];
10198 const { onBeforeEnter, onEnter, onEnterCancelled, onLeave, onLeaveCancelled, onBeforeAppear = onBeforeEnter, onAppear = onEnter, onAppearCancelled = onEnterCancelled } = baseProps;
10199 const finishEnter = (el, isAppear, done) => {
10200 removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
10201 removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
10202 done && done();
10203 };
10204 const finishLeave = (el, done) => {
10205 el._isLeaving = false;
10206 removeTransitionClass(el, leaveFromClass);
10207 removeTransitionClass(el, leaveToClass);
10208 removeTransitionClass(el, leaveActiveClass);
10209 done && done();
10210 };
10211 const makeEnterHook = (isAppear) => {
10212 return (el, done) => {
10213 const hook = isAppear ? onAppear : onEnter;
10214 const resolve = () => finishEnter(el, isAppear, done);
10215 callHook(hook, [el, resolve]);
10216 nextFrame(() => {
10217 removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
10218 addTransitionClass(el, isAppear ? appearToClass : enterToClass);
10219 if (!hasExplicitCallback(hook)) {
10220 whenTransitionEnds(el, type, enterDuration, resolve);
10221 }
10222 });
10223 };
10224 };
10225 return extend(baseProps, {
10226 onBeforeEnter(el) {
10227 callHook(onBeforeEnter, [el]);
10228 addTransitionClass(el, enterFromClass);
10229 addTransitionClass(el, enterActiveClass);
10230 },
10231 onBeforeAppear(el) {
10232 callHook(onBeforeAppear, [el]);
10233 addTransitionClass(el, appearFromClass);
10234 addTransitionClass(el, appearActiveClass);
10235 },
10236 onEnter: makeEnterHook(false),
10237 onAppear: makeEnterHook(true),
10238 onLeave(el, done) {
10239 el._isLeaving = true;
10240 const resolve = () => finishLeave(el, done);
10241 addTransitionClass(el, leaveFromClass);
10242 // force reflow so *-leave-from classes immediately take effect (#2593)
10243 forceReflow();
10244 addTransitionClass(el, leaveActiveClass);
10245 nextFrame(() => {
10246 if (!el._isLeaving) {
10247 // cancelled
10248 return;
10249 }
10250 removeTransitionClass(el, leaveFromClass);
10251 addTransitionClass(el, leaveToClass);
10252 if (!hasExplicitCallback(onLeave)) {
10253 whenTransitionEnds(el, type, leaveDuration, resolve);
10254 }
10255 });
10256 callHook(onLeave, [el, resolve]);
10257 },
10258 onEnterCancelled(el) {
10259 finishEnter(el, false);
10260 callHook(onEnterCancelled, [el]);
10261 },
10262 onAppearCancelled(el) {
10263 finishEnter(el, true);
10264 callHook(onAppearCancelled, [el]);
10265 },
10266 onLeaveCancelled(el) {
10267 finishLeave(el);
10268 callHook(onLeaveCancelled, [el]);
10269 }
10270 });
10271}
10272function normalizeDuration(duration) {
10273 if (duration == null) {
10274 return null;
10275 }
10276 else if (isObject(duration)) {
10277 return [NumberOf(duration.enter), NumberOf(duration.leave)];
10278 }
10279 else {
10280 const n = NumberOf(duration);
10281 return [n, n];
10282 }
10283}
10284function NumberOf(val) {
10285 const res = toNumber(val);
10286 {
10287 assertNumber(res, '<transition> explicit duration');
10288 }
10289 return res;
10290}
10291function addTransitionClass(el, cls) {
10292 cls.split(/\s+/).forEach(c => c && el.classList.add(c));
10293 (el._vtc ||
10294 (el._vtc = new Set())).add(cls);
10295}
10296function removeTransitionClass(el, cls) {
10297 cls.split(/\s+/).forEach(c => c && el.classList.remove(c));
10298 const { _vtc } = el;
10299 if (_vtc) {
10300 _vtc.delete(cls);
10301 if (!_vtc.size) {
10302 el._vtc = undefined;
10303 }
10304 }
10305}
10306function nextFrame(cb) {
10307 requestAnimationFrame(() => {
10308 requestAnimationFrame(cb);
10309 });
10310}
10311let endId = 0;
10312function whenTransitionEnds(el, expectedType, explicitTimeout, resolve) {
10313 const id = (el._endId = ++endId);
10314 const resolveIfNotStale = () => {
10315 if (id === el._endId) {
10316 resolve();
10317 }
10318 };
10319 if (explicitTimeout) {
10320 return setTimeout(resolveIfNotStale, explicitTimeout);
10321 }
10322 const { type, timeout, propCount } = getTransitionInfo(el, expectedType);
10323 if (!type) {
10324 return resolve();
10325 }
10326 const endEvent = type + 'end';
10327 let ended = 0;
10328 const end = () => {
10329 el.removeEventListener(endEvent, onEnd);
10330 resolveIfNotStale();
10331 };
10332 const onEnd = (e) => {
10333 if (e.target === el && ++ended >= propCount) {
10334 end();
10335 }
10336 };
10337 setTimeout(() => {
10338 if (ended < propCount) {
10339 end();
10340 }
10341 }, timeout + 1);
10342 el.addEventListener(endEvent, onEnd);
10343}
10344function getTransitionInfo(el, expectedType) {
10345 const styles = window.getComputedStyle(el);
10346 // JSDOM may return undefined for transition properties
10347 const getStyleProperties = (key) => (styles[key] || '').split(', ');
10348 const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
10349 const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
10350 const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
10351 const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
10352 const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
10353 const animationTimeout = getTimeout(animationDelays, animationDurations);
10354 let type = null;
10355 let timeout = 0;
10356 let propCount = 0;
10357 /* istanbul ignore if */
10358 if (expectedType === TRANSITION) {
10359 if (transitionTimeout > 0) {
10360 type = TRANSITION;
10361 timeout = transitionTimeout;
10362 propCount = transitionDurations.length;
10363 }
10364 }
10365 else if (expectedType === ANIMATION) {
10366 if (animationTimeout > 0) {
10367 type = ANIMATION;
10368 timeout = animationTimeout;
10369 propCount = animationDurations.length;
10370 }
10371 }
10372 else {
10373 timeout = Math.max(transitionTimeout, animationTimeout);
10374 type =
10375 timeout > 0
10376 ? transitionTimeout > animationTimeout
10377 ? TRANSITION
10378 : ANIMATION
10379 : null;
10380 propCount = type
10381 ? type === TRANSITION
10382 ? transitionDurations.length
10383 : animationDurations.length
10384 : 0;
10385 }
10386 const hasTransform = type === TRANSITION &&
10387 /\b(transform|all)(,|$)/.test(getStyleProperties(`${TRANSITION}Property`).toString());
10388 return {
10389 type,
10390 timeout,
10391 propCount,
10392 hasTransform
10393 };
10394}
10395function getTimeout(delays, durations) {
10396 while (delays.length < durations.length) {
10397 delays = delays.concat(delays);
10398 }
10399 return Math.max(...durations.map((d, i) => toMs(d) + toMs(delays[i])));
10400}
10401// Old versions of Chromium (below 61.0.3163.100) formats floating pointer
10402// numbers in a locale-dependent way, using a comma instead of a dot.
10403// If comma is not replaced with a dot, the input will be rounded down
10404// (i.e. acting as a floor function) causing unexpected behaviors
10405function toMs(s) {
10406 return Number(s.slice(0, -1).replace(',', '.')) * 1000;
10407}
10408// synchronously force layout to put elements into a certain state
10409function forceReflow() {
10410 return document.body.offsetHeight;
10411}
10412
10413const positionMap = new WeakMap();
10414const newPositionMap = new WeakMap();
10415const TransitionGroupImpl = {
10416 name: 'TransitionGroup',
10417 props: /*#__PURE__*/ extend({}, TransitionPropsValidators, {
10418 tag: String,
10419 moveClass: String
10420 }),
10421 setup(props, { slots }) {
10422 const instance = getCurrentInstance();
10423 const state = useTransitionState();
10424 let prevChildren;
10425 let children;
10426 onUpdated(() => {
10427 // children is guaranteed to exist after initial render
10428 if (!prevChildren.length) {
10429 return;
10430 }
10431 const moveClass = props.moveClass || `${props.name || 'v'}-move`;
10432 if (!hasCSSTransform(prevChildren[0].el, instance.vnode.el, moveClass)) {
10433 return;
10434 }
10435 // we divide the work into three loops to avoid mixing DOM reads and writes
10436 // in each iteration - which helps prevent layout thrashing.
10437 prevChildren.forEach(callPendingCbs);
10438 prevChildren.forEach(recordPosition);
10439 const movedChildren = prevChildren.filter(applyTranslation);
10440 // force reflow to put everything in position
10441 forceReflow();
10442 movedChildren.forEach(c => {
10443 const el = c.el;
10444 const style = el.style;
10445 addTransitionClass(el, moveClass);
10446 style.transform = style.webkitTransform = style.transitionDuration = '';
10447 const cb = (el._moveCb = (e) => {
10448 if (e && e.target !== el) {
10449 return;
10450 }
10451 if (!e || /transform$/.test(e.propertyName)) {
10452 el.removeEventListener('transitionend', cb);
10453 el._moveCb = null;
10454 removeTransitionClass(el, moveClass);
10455 }
10456 });
10457 el.addEventListener('transitionend', cb);
10458 });
10459 });
10460 return () => {
10461 const rawProps = toRaw(props);
10462 const cssTransitionProps = resolveTransitionProps(rawProps);
10463 let tag = rawProps.tag || Fragment;
10464 prevChildren = children;
10465 children = slots.default ? getTransitionRawChildren(slots.default()) : [];
10466 for (let i = 0; i < children.length; i++) {
10467 const child = children[i];
10468 if (child.key != null) {
10469 setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
10470 }
10471 else {
10472 warn(`<TransitionGroup> children must be keyed.`);
10473 }
10474 }
10475 if (prevChildren) {
10476 for (let i = 0; i < prevChildren.length; i++) {
10477 const child = prevChildren[i];
10478 setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
10479 positionMap.set(child, child.el.getBoundingClientRect());
10480 }
10481 }
10482 return createVNode(tag, null, children);
10483 };
10484 }
10485};
10486/**
10487 * TransitionGroup does not support "mode" so we need to remove it from the
10488 * props declarations, but direct delete operation is considered a side effect
10489 * and will make the entire transition feature non-tree-shakeable, so we do it
10490 * in a function and mark the function's invocation as pure.
10491 */
10492const removeMode = (props) => delete props.mode;
10493/*#__PURE__*/ removeMode(TransitionGroupImpl.props);
10494const TransitionGroup = TransitionGroupImpl;
10495function callPendingCbs(c) {
10496 const el = c.el;
10497 if (el._moveCb) {
10498 el._moveCb();
10499 }
10500 if (el._enterCb) {
10501 el._enterCb();
10502 }
10503}
10504function recordPosition(c) {
10505 newPositionMap.set(c, c.el.getBoundingClientRect());
10506}
10507function applyTranslation(c) {
10508 const oldPos = positionMap.get(c);
10509 const newPos = newPositionMap.get(c);
10510 const dx = oldPos.left - newPos.left;
10511 const dy = oldPos.top - newPos.top;
10512 if (dx || dy) {
10513 const s = c.el.style;
10514 s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
10515 s.transitionDuration = '0s';
10516 return c;
10517 }
10518}
10519function hasCSSTransform(el, root, moveClass) {
10520 // Detect whether an element with the move class applied has
10521 // CSS transitions. Since the element may be inside an entering
10522 // transition at this very moment, we make a clone of it and remove
10523 // all other transition classes applied to ensure only the move class
10524 // is applied.
10525 const clone = el.cloneNode();
10526 if (el._vtc) {
10527 el._vtc.forEach(cls => {
10528 cls.split(/\s+/).forEach(c => c && clone.classList.remove(c));
10529 });
10530 }
10531 moveClass.split(/\s+/).forEach(c => c && clone.classList.add(c));
10532 clone.style.display = 'none';
10533 const container = (root.nodeType === 1 ? root : root.parentNode);
10534 container.appendChild(clone);
10535 const { hasTransform } = getTransitionInfo(clone);
10536 container.removeChild(clone);
10537 return hasTransform;
10538}
10539
10540const getModelAssigner = (vnode) => {
10541 const fn = vnode.props['onUpdate:modelValue'] ||
10542 (false );
10543 return isArray(fn) ? value => invokeArrayFns(fn, value) : fn;
10544};
10545function onCompositionStart(e) {
10546 e.target.composing = true;
10547}
10548function onCompositionEnd(e) {
10549 const target = e.target;
10550 if (target.composing) {
10551 target.composing = false;
10552 target.dispatchEvent(new Event('input'));
10553 }
10554}
10555// We are exporting the v-model runtime directly as vnode hooks so that it can
10556// be tree-shaken in case v-model is never used.
10557const vModelText = {
10558 created(el, { modifiers: { lazy, trim, number } }, vnode) {
10559 el._assign = getModelAssigner(vnode);
10560 const castToNumber = number || (vnode.props && vnode.props.type === 'number');
10561 addEventListener(el, lazy ? 'change' : 'input', e => {
10562 if (e.target.composing)
10563 return;
10564 let domValue = el.value;
10565 if (trim) {
10566 domValue = domValue.trim();
10567 }
10568 if (castToNumber) {
10569 domValue = looseToNumber(domValue);
10570 }
10571 el._assign(domValue);
10572 });
10573 if (trim) {
10574 addEventListener(el, 'change', () => {
10575 el.value = el.value.trim();
10576 });
10577 }
10578 if (!lazy) {
10579 addEventListener(el, 'compositionstart', onCompositionStart);
10580 addEventListener(el, 'compositionend', onCompositionEnd);
10581 // Safari < 10.2 & UIWebView doesn't fire compositionend when
10582 // switching focus before confirming composition choice
10583 // this also fixes the issue where some browsers e.g. iOS Chrome
10584 // fires "change" instead of "input" on autocomplete.
10585 addEventListener(el, 'change', onCompositionEnd);
10586 }
10587 },
10588 // set value on mounted so it's after min/max for type="range"
10589 mounted(el, { value }) {
10590 el.value = value == null ? '' : value;
10591 },
10592 beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
10593 el._assign = getModelAssigner(vnode);
10594 // avoid clearing unresolved text. #2302
10595 if (el.composing)
10596 return;
10597 if (document.activeElement === el && el.type !== 'range') {
10598 if (lazy) {
10599 return;
10600 }
10601 if (trim && el.value.trim() === value) {
10602 return;
10603 }
10604 if ((number || el.type === 'number') &&
10605 looseToNumber(el.value) === value) {
10606 return;
10607 }
10608 }
10609 const newValue = value == null ? '' : value;
10610 if (el.value !== newValue) {
10611 el.value = newValue;
10612 }
10613 }
10614};
10615const vModelCheckbox = {
10616 // #4096 array checkboxes need to be deep traversed
10617 deep: true,
10618 created(el, _, vnode) {
10619 el._assign = getModelAssigner(vnode);
10620 addEventListener(el, 'change', () => {
10621 const modelValue = el._modelValue;
10622 const elementValue = getValue(el);
10623 const checked = el.checked;
10624 const assign = el._assign;
10625 if (isArray(modelValue)) {
10626 const index = looseIndexOf(modelValue, elementValue);
10627 const found = index !== -1;
10628 if (checked && !found) {
10629 assign(modelValue.concat(elementValue));
10630 }
10631 else if (!checked && found) {
10632 const filtered = [...modelValue];
10633 filtered.splice(index, 1);
10634 assign(filtered);
10635 }
10636 }
10637 else if (isSet(modelValue)) {
10638 const cloned = new Set(modelValue);
10639 if (checked) {
10640 cloned.add(elementValue);
10641 }
10642 else {
10643 cloned.delete(elementValue);
10644 }
10645 assign(cloned);
10646 }
10647 else {
10648 assign(getCheckboxValue(el, checked));
10649 }
10650 });
10651 },
10652 // set initial checked on mount to wait for true-value/false-value
10653 mounted: setChecked,
10654 beforeUpdate(el, binding, vnode) {
10655 el._assign = getModelAssigner(vnode);
10656 setChecked(el, binding, vnode);
10657 }
10658};
10659function setChecked(el, { value, oldValue }, vnode) {
10660 el._modelValue = value;
10661 if (isArray(value)) {
10662 el.checked = looseIndexOf(value, vnode.props.value) > -1;
10663 }
10664 else if (isSet(value)) {
10665 el.checked = value.has(vnode.props.value);
10666 }
10667 else if (value !== oldValue) {
10668 el.checked = looseEqual(value, getCheckboxValue(el, true));
10669 }
10670}
10671const vModelRadio = {
10672 created(el, { value }, vnode) {
10673 el.checked = looseEqual(value, vnode.props.value);
10674 el._assign = getModelAssigner(vnode);
10675 addEventListener(el, 'change', () => {
10676 el._assign(getValue(el));
10677 });
10678 },
10679 beforeUpdate(el, { value, oldValue }, vnode) {
10680 el._assign = getModelAssigner(vnode);
10681 if (value !== oldValue) {
10682 el.checked = looseEqual(value, vnode.props.value);
10683 }
10684 }
10685};
10686const vModelSelect = {
10687 // <select multiple> value need to be deep traversed
10688 deep: true,
10689 created(el, { value, modifiers: { number } }, vnode) {
10690 const isSetModel = isSet(value);
10691 addEventListener(el, 'change', () => {
10692 const selectedVal = Array.prototype.filter
10693 .call(el.options, (o) => o.selected)
10694 .map((o) => number ? looseToNumber(getValue(o)) : getValue(o));
10695 el._assign(el.multiple
10696 ? isSetModel
10697 ? new Set(selectedVal)
10698 : selectedVal
10699 : selectedVal[0]);
10700 });
10701 el._assign = getModelAssigner(vnode);
10702 },
10703 // set value in mounted & updated because <select> relies on its children
10704 // <option>s.
10705 mounted(el, { value }) {
10706 setSelected(el, value);
10707 },
10708 beforeUpdate(el, _binding, vnode) {
10709 el._assign = getModelAssigner(vnode);
10710 },
10711 updated(el, { value }) {
10712 setSelected(el, value);
10713 }
10714};
10715function setSelected(el, value) {
10716 const isMultiple = el.multiple;
10717 if (isMultiple && !isArray(value) && !isSet(value)) {
10718 warn(`<select multiple v-model> expects an Array or Set value for its binding, ` +
10719 `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`);
10720 return;
10721 }
10722 for (let i = 0, l = el.options.length; i < l; i++) {
10723 const option = el.options[i];
10724 const optionValue = getValue(option);
10725 if (isMultiple) {
10726 if (isArray(value)) {
10727 option.selected = looseIndexOf(value, optionValue) > -1;
10728 }
10729 else {
10730 option.selected = value.has(optionValue);
10731 }
10732 }
10733 else {
10734 if (looseEqual(getValue(option), value)) {
10735 if (el.selectedIndex !== i)
10736 el.selectedIndex = i;
10737 return;
10738 }
10739 }
10740 }
10741 if (!isMultiple && el.selectedIndex !== -1) {
10742 el.selectedIndex = -1;
10743 }
10744}
10745// retrieve raw value set via :value bindings
10746function getValue(el) {
10747 return '_value' in el ? el._value : el.value;
10748}
10749// retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
10750function getCheckboxValue(el, checked) {
10751 const key = checked ? '_trueValue' : '_falseValue';
10752 return key in el ? el[key] : checked;
10753}
10754const vModelDynamic = {
10755 created(el, binding, vnode) {
10756 callModelHook(el, binding, vnode, null, 'created');
10757 },
10758 mounted(el, binding, vnode) {
10759 callModelHook(el, binding, vnode, null, 'mounted');
10760 },
10761 beforeUpdate(el, binding, vnode, prevVNode) {
10762 callModelHook(el, binding, vnode, prevVNode, 'beforeUpdate');
10763 },
10764 updated(el, binding, vnode, prevVNode) {
10765 callModelHook(el, binding, vnode, prevVNode, 'updated');
10766 }
10767};
10768function resolveDynamicModel(tagName, type) {
10769 switch (tagName) {
10770 case 'SELECT':
10771 return vModelSelect;
10772 case 'TEXTAREA':
10773 return vModelText;
10774 default:
10775 switch (type) {
10776 case 'checkbox':
10777 return vModelCheckbox;
10778 case 'radio':
10779 return vModelRadio;
10780 default:
10781 return vModelText;
10782 }
10783 }
10784}
10785function callModelHook(el, binding, vnode, prevVNode, hook) {
10786 const modelToUse = resolveDynamicModel(el.tagName, vnode.props && vnode.props.type);
10787 const fn = modelToUse[hook];
10788 fn && fn(el, binding, vnode, prevVNode);
10789}
10790
10791const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'];
10792const modifierGuards = {
10793 stop: e => e.stopPropagation(),
10794 prevent: e => e.preventDefault(),
10795 self: e => e.target !== e.currentTarget,
10796 ctrl: e => !e.ctrlKey,
10797 shift: e => !e.shiftKey,
10798 alt: e => !e.altKey,
10799 meta: e => !e.metaKey,
10800 left: e => 'button' in e && e.button !== 0,
10801 middle: e => 'button' in e && e.button !== 1,
10802 right: e => 'button' in e && e.button !== 2,
10803 exact: (e, modifiers) => systemModifiers.some(m => e[`${m}Key`] && !modifiers.includes(m))
10804};
10805/**
10806 * @private
10807 */
10808const withModifiers = (fn, modifiers) => {
10809 return (event, ...args) => {
10810 for (let i = 0; i < modifiers.length; i++) {
10811 const guard = modifierGuards[modifiers[i]];
10812 if (guard && guard(event, modifiers))
10813 return;
10814 }
10815 return fn(event, ...args);
10816 };
10817};
10818// Kept for 2.x compat.
10819// Note: IE11 compat for `spacebar` and `del` is removed for now.
10820const keyNames = {
10821 esc: 'escape',
10822 space: ' ',
10823 up: 'arrow-up',
10824 left: 'arrow-left',
10825 right: 'arrow-right',
10826 down: 'arrow-down',
10827 delete: 'backspace'
10828};
10829/**
10830 * @private
10831 */
10832const withKeys = (fn, modifiers) => {
10833 return (event) => {
10834 if (!('key' in event)) {
10835 return;
10836 }
10837 const eventKey = hyphenate(event.key);
10838 if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
10839 return fn(event);
10840 }
10841 };
10842};
10843
10844const vShow = {
10845 beforeMount(el, { value }, { transition }) {
10846 el._vod = el.style.display === 'none' ? '' : el.style.display;
10847 if (transition && value) {
10848 transition.beforeEnter(el);
10849 }
10850 else {
10851 setDisplay(el, value);
10852 }
10853 },
10854 mounted(el, { value }, { transition }) {
10855 if (transition && value) {
10856 transition.enter(el);
10857 }
10858 },
10859 updated(el, { value, oldValue }, { transition }) {
10860 if (!value === !oldValue)
10861 return;
10862 if (transition) {
10863 if (value) {
10864 transition.beforeEnter(el);
10865 setDisplay(el, true);
10866 transition.enter(el);
10867 }
10868 else {
10869 transition.leave(el, () => {
10870 setDisplay(el, false);
10871 });
10872 }
10873 }
10874 else {
10875 setDisplay(el, value);
10876 }
10877 },
10878 beforeUnmount(el, { value }) {
10879 setDisplay(el, value);
10880 }
10881};
10882function setDisplay(el, value) {
10883 el.style.display = value ? el._vod : 'none';
10884}
10885
10886const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps);
10887// lazy create the renderer - this makes core renderer logic tree-shakable
10888// in case the user only imports reactivity utilities from Vue.
10889let renderer;
10890let enabledHydration = false;
10891function ensureRenderer() {
10892 return (renderer ||
10893 (renderer = createRenderer(rendererOptions)));
10894}
10895function ensureHydrationRenderer() {
10896 renderer = enabledHydration
10897 ? renderer
10898 : createHydrationRenderer(rendererOptions);
10899 enabledHydration = true;
10900 return renderer;
10901}
10902// use explicit type casts here to avoid import() calls in rolled-up d.ts
10903const render = ((...args) => {
10904 ensureRenderer().render(...args);
10905});
10906const hydrate = ((...args) => {
10907 ensureHydrationRenderer().hydrate(...args);
10908});
10909const createApp = ((...args) => {
10910 const app = ensureRenderer().createApp(...args);
10911 {
10912 injectNativeTagCheck(app);
10913 injectCompilerOptionsCheck(app);
10914 }
10915 const { mount } = app;
10916 app.mount = (containerOrSelector) => {
10917 const container = normalizeContainer(containerOrSelector);
10918 if (!container)
10919 return;
10920 const component = app._component;
10921 if (!isFunction(component) && !component.render && !component.template) {
10922 // __UNSAFE__
10923 // Reason: potential execution of JS expressions in in-DOM template.
10924 // The user must make sure the in-DOM template is trusted. If it's
10925 // rendered by the server, the template should not contain any user data.
10926 component.template = container.innerHTML;
10927 }
10928 // clear content before mounting
10929 container.innerHTML = '';
10930 const proxy = mount(container, false, container instanceof SVGElement);
10931 if (container instanceof Element) {
10932 container.removeAttribute('v-cloak');
10933 container.setAttribute('data-v-app', '');
10934 }
10935 return proxy;
10936 };
10937 return app;
10938});
10939const createSSRApp = ((...args) => {
10940 const app = ensureHydrationRenderer().createApp(...args);
10941 {
10942 injectNativeTagCheck(app);
10943 injectCompilerOptionsCheck(app);
10944 }
10945 const { mount } = app;
10946 app.mount = (containerOrSelector) => {
10947 const container = normalizeContainer(containerOrSelector);
10948 if (container) {
10949 return mount(container, true, container instanceof SVGElement);
10950 }
10951 };
10952 return app;
10953});
10954function injectNativeTagCheck(app) {
10955 // Inject `isNativeTag`
10956 // this is used for component name validation (dev only)
10957 Object.defineProperty(app.config, 'isNativeTag', {
10958 value: (tag) => isHTMLTag(tag) || isSVGTag(tag),
10959 writable: false
10960 });
10961}
10962// dev only
10963function injectCompilerOptionsCheck(app) {
10964 if (isRuntimeOnly()) {
10965 const isCustomElement = app.config.isCustomElement;
10966 Object.defineProperty(app.config, 'isCustomElement', {
10967 get() {
10968 return isCustomElement;
10969 },
10970 set() {
10971 warn(`The \`isCustomElement\` config option is deprecated. Use ` +
10972 `\`compilerOptions.isCustomElement\` instead.`);
10973 }
10974 });
10975 const compilerOptions = app.config.compilerOptions;
10976 const msg = `The \`compilerOptions\` config option is only respected when using ` +
10977 `a build of Vue.js that includes the runtime compiler (aka "full build"). ` +
10978 `Since you are using the runtime-only build, \`compilerOptions\` ` +
10979 `must be passed to \`@vue/compiler-dom\` in the build setup instead.\n` +
10980 `- For vue-loader: pass it via vue-loader's \`compilerOptions\` loader option.\n` +
10981 `- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\n` +
10982 `- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom`;
10983 Object.defineProperty(app.config, 'compilerOptions', {
10984 get() {
10985 warn(msg);
10986 return compilerOptions;
10987 },
10988 set() {
10989 warn(msg);
10990 }
10991 });
10992 }
10993}
10994function normalizeContainer(container) {
10995 if (isString(container)) {
10996 const res = document.querySelector(container);
10997 if (!res) {
10998 warn(`Failed to mount app: mount target selector "${container}" returned null.`);
10999 }
11000 return res;
11001 }
11002 if (window.ShadowRoot &&
11003 container instanceof window.ShadowRoot &&
11004 container.mode === 'closed') {
11005 warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
11006 }
11007 return container;
11008}
11009/**
11010 * @internal
11011 */
11012const initDirectivesForSSR = NOOP;
11013
11014function initDev() {
11015 {
11016 /* istanbul ignore if */
11017 {
11018 console.info(`You are running a development build of Vue.\n` +
11019 `Make sure to use the production build (*.prod.js) when deploying for production.`);
11020 }
11021 initCustomFormatter();
11022 }
11023}
11024
11025// This entry exports the runtime only, and is built as
11026{
11027 initDev();
11028}
11029const compile = () => {
11030 {
11031 warn(`Runtime compilation is not supported in this build of Vue.` +
11032 (` Use "vue.esm-browser.js" instead.`
11033 ) /* should not happen */);
11034 }
11035};
11036
11037export { BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };