diff --git a/RELEASE-NOTES-1.43 b/RELEASE-NOTES-1.43 index 67cdda4dfce..85266a200eb 100644 --- a/RELEASE-NOTES-1.43 +++ b/RELEASE-NOTES-1.43 @@ -113,6 +113,7 @@ For notes on 1.42.x and older releases, see HISTORY. * Updated symfony/yaml from 5.4.35 to 5.4.39. * Updated OOUI from v0.49.1 to v0.49.2. * Updated wikimedia/less.php from 4.2.1 to 4.4.1. +* Updated vue from 3.3.9 to 3.4.27. * … ===== Changed development-only external libraries ===== diff --git a/resources/lib/foreign-resources.yaml b/resources/lib/foreign-resources.yaml index 9a84f4a306c..7ecf6e120a1 100644 --- a/resources/lib/foreign-resources.yaml +++ b/resources/lib/foreign-resources.yaml @@ -455,11 +455,11 @@ vue: license: MIT homepage: https://vuejs.org/ authors: Yuxi (Evan) You - version: 3.3.9 - purl: pkg:npm/vue@3.3.9 + version: 3.4.27 + purl: pkg:npm/vue@3.4.27 type: tar - src: https://registry.npmjs.org/vue/-/vue-3.3.9.tgz - integrity: sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w== + src: https://registry.npmjs.org/vue/-/vue-3.4.27.tgz + integrity: sha384-NI/upbRDNmqZCbvCtpncGt32Iw2gOsS6j/l3D4wSfz9IVnSXqLhO5mHLbVblRHet dest: package/README.md: package/LICENSE: diff --git a/resources/lib/vue/README.md b/resources/lib/vue/README.md index a98bd997487..2aca524e03d 100644 --- a/resources/lib/vue/README.md +++ b/resources/lib/vue/README.md @@ -33,18 +33,23 @@ #### Bundler Build Feature Flags -Starting with 3.0.0-rc.3, `esm-bundler` builds now exposes global feature flags that can be overwritten at compile time: +[Detailed Reference on vuejs.org](https://vuejs.org/api/compile-time-flags.html) -- `__VUE_OPTIONS_API__` (enable/disable Options API support, default: `true`) -- `__VUE_PROD_DEVTOOLS__` (enable/disable devtools support in production, default: `false`) +`esm-bundler` builds of Vue expose global feature flags that can be overwritten at compile time: -The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags: +- `__VUE_OPTIONS_API__` + - Default: `true` + - Enable / disable Options API support -- webpack: use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) -- Rollup: use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace) -- Vite: configured by default, but can be overwritten using the [`define` option](https://github.com/vitejs/vite/blob/a4133c073e640b17276b2de6e91a6857bdf382e1/src/node/config.ts#L72-L76) +- `__VUE_PROD_DEVTOOLS__` + - Default: `false` + - Enable / disable devtools support in production -Note: the replacement value **must be boolean literals** and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions. +- `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` + - Default: `false` + - Enable / disable detailed warnings for hydration mismatches in production + +The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle. ### For Server-Side Rendering diff --git a/resources/lib/vue/vue.global.js b/resources/lib/vue/vue.global.js index 4c11dd5bf27..3587ac9526f 100644 --- a/resources/lib/vue/vue.global.js +++ b/resources/lib/vue/vue.global.js @@ -1,13 +1,16 @@ +/** +* vue v3.4.27 +* (c) 2018-present Yuxi (Evan) You and Vue contributors +* @license MIT +**/ var Vue = (function (exports) { 'use strict'; + /*! #__NO_SIDE_EFFECTS__ */ + // @__NO_SIDE_EFFECTS__ function makeMap(str, expectsLowerCase) { - const map = /* @__PURE__ */ Object.create(null); - const list = str.split(","); - for (let i = 0; i < list.length; i++) { - map[list[i]] = true; - } - return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val]; + const set = new Set(str.split(",")); + return expectsLowerCase ? (val) => set.has(val.toLowerCase()) : (val) => set.has(val); } const EMPTY_OBJ = Object.freeze({}) ; @@ -15,8 +18,8 @@ var Vue = (function (exports) { const NOOP = () => { }; const NO = () => false; - const onRE = /^on[^a-z]/; - const isOn = (key) => onRE.test(key); + const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter + (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97); const isModelListener = (key) => key.startsWith("onUpdate:"); const extend = Object.assign; const remove = (arr, el) => { @@ -81,10 +84,11 @@ var Vue = (function (exports) { fns[i](arg); } }; - const def = (obj, key, value) => { + const def = (obj, key, value, writable = false) => { Object.defineProperty(obj, key, { configurable: true, enumerable: false, + writable, value }); }; @@ -124,7 +128,7 @@ var Vue = (function (exports) { [3]: "FORWARDED" }; - const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console"; + const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error"; const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED); const range = 2; @@ -197,6 +201,20 @@ var Vue = (function (exports) { }); return ret; } + function stringifyStyle(styles) { + let ret = ""; + if (!styles || isString(styles)) { + return ret; + } + for (const key in styles) { + const value = styles[key]; + if (isString(value) || typeof value === "number") { + const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key); + ret += `${normalizedKey}:${value};`; + } + } + return ret; + } function normalizeClass(value) { let res = ""; if (isString(value)) { @@ -232,16 +250,34 @@ var Vue = (function (exports) { const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot"; const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view"; + const MATH_TAGS = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics"; const VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr"; const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS); const isSVGTag = /* @__PURE__ */ makeMap(SVG_TAGS); + const isMathMLTag = /* @__PURE__ */ makeMap(MATH_TAGS); const isVoidTag = /* @__PURE__ */ makeMap(VOID_TAGS); const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`; const isSpecialBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs); + const isBooleanAttr = /* @__PURE__ */ makeMap( + specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected` + ); function includeBooleanAttr(value) { return !!value || value === ""; } + const isKnownHtmlAttr = /* @__PURE__ */ makeMap( + `accept,accept-charset,accesskey,action,align,allow,alt,async,autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,border,buffered,capture,challenge,charset,checked,cite,class,code,codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http-equiv,icon,id,importance,inert,integrity,ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,target,title,translate,type,usemap,value,width,wrap` + ); + const isKnownSvgAttr = /* @__PURE__ */ makeMap( + `xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,clip,clipPathUnits,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-profile,color-rendering,contentScriptType,contentStyleType,crossorigin,cursor,cx,cy,d,decelerate,descent,diffuseConstant,direction,display,divisor,dominant-baseline,dur,dx,dy,edgeMode,elevation,enable-background,end,exponent,fill,fill-opacity,fill-rule,filter,filterRes,filterUnits,flood-color,flood-opacity,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,format,from,fr,fx,fy,g1,g2,glyph-name,glyph-orientation-horizontal,glyph-orientation-vertical,glyphRef,gradientTransform,gradientUnits,hanging,height,href,hreflang,horiz-adv-x,horiz-origin-x,id,ideographic,image-rendering,in,in2,intercept,k,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,kerning,keyPoints,keySplines,keyTimes,lang,lengthAdjust,letter-spacing,lighting-color,limitingConeAngle,local,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mask,maskContentUnits,maskUnits,mathematical,max,media,method,min,mode,name,numOctaves,offset,opacity,operator,order,orient,orientation,origin,overflow,overline-position,overline-thickness,panose-1,paint-order,path,pathLength,patternContentUnits,patternTransform,patternUnits,ping,pointer-events,points,pointsAtX,pointsAtY,pointsAtZ,preserveAlpha,preserveAspectRatio,primitiveUnits,r,radius,referrerPolicy,refX,refY,rel,rendering-intent,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,result,rotate,rx,ry,scale,seed,shape-rendering,slope,spacing,specularConstant,specularExponent,speed,spreadMethod,startOffset,stdDeviation,stemh,stemv,stitchTiles,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,string,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,style,surfaceScale,systemLanguage,tabindex,tableValues,target,targetX,targetY,text-anchor,text-decoration,text-rendering,textLength,to,transform,transform-origin,type,u1,u2,underline-position,underline-thickness,unicode,unicode-bidi,unicode-range,units-per-em,v-alphabetic,v-hanging,v-ideographic,v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan` + ); + function isRenderableAttrValue(value) { + if (value == null) { + return false; + } + const type = typeof value; + return type === "string" || type === "number" || type === "boolean"; + } function looseCompareArrays(a, b) { if (a.length !== b.length) @@ -303,22 +339,35 @@ var Vue = (function (exports) { return replacer(_key, val.value); } else if (isMap(val)) { return { - [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => { - entries[`${key} =>`] = val2; - return entries; - }, {}) + [`Map(${val.size})`]: [...val.entries()].reduce( + (entries, [key, val2], i) => { + entries[stringifySymbol(key, i) + " =>"] = val2; + return entries; + }, + {} + ) }; } else if (isSet(val)) { return { - [`Set(${val.size})`]: [...val.values()] + [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v)) }; + } else if (isSymbol(val)) { + return stringifySymbol(val); } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) { return String(val); } return val; }; + const stringifySymbol = (v, i = "") => { + var _a; + return ( + // Symbol.description in es2019+ so we need to cast here to pass + // the lib: es2016 check + isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v + ); + }; - function warn$1(msg, ...args) { + function warn$2(msg, ...args) { console.warn(`[Vue warn] ${msg}`, ...args); } @@ -358,7 +407,7 @@ var Vue = (function (exports) { activeEffectScope = currentEffectScope; } } else { - warn$1(`cannot run an inactive effect scope.`); + warn$2(`cannot run an inactive effect scope.`); } } /** @@ -416,123 +465,127 @@ var Vue = (function (exports) { if (activeEffectScope) { activeEffectScope.cleanups.push(fn); } else { - warn$1( + warn$2( `onScopeDispose() is called when there is no active effect scope to be associated with.` ); } } - const createDep = (effects) => { - const dep = new Set(effects); - dep.w = 0; - dep.n = 0; - return dep; - }; - const wasTracked = (dep) => (dep.w & trackOpBit) > 0; - const newTracked = (dep) => (dep.n & trackOpBit) > 0; - const initDepMarkers = ({ deps }) => { - if (deps.length) { - for (let i = 0; i < deps.length; i++) { - deps[i].w |= trackOpBit; - } - } - }; - const finalizeDepMarkers = (effect) => { - const { deps } = effect; - if (deps.length) { - let ptr = 0; - for (let i = 0; i < deps.length; i++) { - const dep = deps[i]; - if (wasTracked(dep) && !newTracked(dep)) { - dep.delete(effect); - } else { - deps[ptr++] = dep; - } - dep.w &= ~trackOpBit; - dep.n &= ~trackOpBit; - } - deps.length = ptr; - } - }; - - const targetMap = /* @__PURE__ */ new WeakMap(); - let effectTrackDepth = 0; - let trackOpBit = 1; - const maxMarkerBits = 30; let activeEffect; - const ITERATE_KEY = Symbol("iterate" ); - const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" ); class ReactiveEffect { - constructor(fn, scheduler = null, scope) { + constructor(fn, trigger, scheduler, scope) { this.fn = fn; + this.trigger = trigger; this.scheduler = scheduler; this.active = true; this.deps = []; - this.parent = void 0; + /** + * @internal + */ + this._dirtyLevel = 4; + /** + * @internal + */ + this._trackId = 0; + /** + * @internal + */ + this._runnings = 0; + /** + * @internal + */ + this._shouldSchedule = false; + /** + * @internal + */ + this._depsLength = 0; recordEffectScope(this, scope); } + get dirty() { + if (this._dirtyLevel === 2 || this._dirtyLevel === 3) { + this._dirtyLevel = 1; + pauseTracking(); + for (let i = 0; i < this._depsLength; i++) { + const dep = this.deps[i]; + if (dep.computed) { + triggerComputed(dep.computed); + if (this._dirtyLevel >= 4) { + break; + } + } + } + if (this._dirtyLevel === 1) { + this._dirtyLevel = 0; + } + resetTracking(); + } + return this._dirtyLevel >= 4; + } + set dirty(v) { + this._dirtyLevel = v ? 4 : 0; + } run() { + this._dirtyLevel = 0; if (!this.active) { return this.fn(); } - let parent = activeEffect; let lastShouldTrack = shouldTrack; - while (parent) { - if (parent === this) { - return; - } - parent = parent.parent; - } + let lastEffect = activeEffect; try { - this.parent = activeEffect; - activeEffect = this; shouldTrack = true; - trackOpBit = 1 << ++effectTrackDepth; - if (effectTrackDepth <= maxMarkerBits) { - initDepMarkers(this); - } else { - cleanupEffect(this); - } + activeEffect = this; + this._runnings++; + preCleanupEffect(this); return this.fn(); } finally { - if (effectTrackDepth <= maxMarkerBits) { - finalizeDepMarkers(this); - } - trackOpBit = 1 << --effectTrackDepth; - activeEffect = this.parent; + postCleanupEffect(this); + this._runnings--; + activeEffect = lastEffect; shouldTrack = lastShouldTrack; - this.parent = void 0; - if (this.deferStop) { - this.stop(); - } } } stop() { - if (activeEffect === this) { - this.deferStop = true; - } else if (this.active) { - cleanupEffect(this); - if (this.onStop) { - this.onStop(); - } + if (this.active) { + preCleanupEffect(this); + postCleanupEffect(this); + this.onStop && this.onStop(); this.active = false; } } } - function cleanupEffect(effect2) { - const { deps } = effect2; - if (deps.length) { - for (let i = 0; i < deps.length; i++) { - deps[i].delete(effect2); + function triggerComputed(computed) { + return computed.value; + } + function preCleanupEffect(effect2) { + effect2._trackId++; + effect2._depsLength = 0; + } + function postCleanupEffect(effect2) { + if (effect2.deps.length > effect2._depsLength) { + for (let i = effect2._depsLength; i < effect2.deps.length; i++) { + cleanupDepEffect(effect2.deps[i], effect2); + } + effect2.deps.length = effect2._depsLength; + } + } + function cleanupDepEffect(dep, effect2) { + const trackId = dep.get(effect2); + if (trackId !== void 0 && effect2._trackId !== trackId) { + dep.delete(effect2); + if (dep.size === 0) { + dep.cleanup(); } - deps.length = 0; } } function effect(fn, options) { if (fn.effect instanceof ReactiveEffect) { fn = fn.effect.fn; } - const _effect = new ReactiveEffect(fn); + const _effect = new ReactiveEffect(fn, NOOP, () => { + if (_effect.dirty) { + _effect.run(); + } + }); if (options) { extend(_effect, options); if (options.scope) @@ -549,6 +602,7 @@ var Vue = (function (exports) { runner.effect.stop(); } let shouldTrack = true; + let pauseScheduleStack = 0; const trackStack = []; function pauseTracking() { trackStack.push(shouldTrack); @@ -558,6 +612,69 @@ var Vue = (function (exports) { const last = trackStack.pop(); shouldTrack = last === void 0 ? true : last; } + function pauseScheduling() { + pauseScheduleStack++; + } + function resetScheduling() { + pauseScheduleStack--; + while (!pauseScheduleStack && queueEffectSchedulers.length) { + queueEffectSchedulers.shift()(); + } + } + function trackEffect(effect2, dep, debuggerEventExtraInfo) { + var _a; + if (dep.get(effect2) !== effect2._trackId) { + dep.set(effect2, effect2._trackId); + const oldDep = effect2.deps[effect2._depsLength]; + if (oldDep !== dep) { + if (oldDep) { + cleanupDepEffect(oldDep, effect2); + } + effect2.deps[effect2._depsLength++] = dep; + } else { + effect2._depsLength++; + } + { + (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo)); + } + } + } + const queueEffectSchedulers = []; + function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) { + var _a; + pauseScheduling(); + for (const effect2 of dep.keys()) { + let tracking; + if (effect2._dirtyLevel < dirtyLevel && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) { + effect2._shouldSchedule || (effect2._shouldSchedule = effect2._dirtyLevel === 0); + effect2._dirtyLevel = dirtyLevel; + } + if (effect2._shouldSchedule && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) { + { + (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo)); + } + effect2.trigger(); + if ((!effect2._runnings || effect2.allowRecurse) && effect2._dirtyLevel !== 2) { + effect2._shouldSchedule = false; + if (effect2.scheduler) { + queueEffectSchedulers.push(effect2.scheduler); + } + } + } + } + resetScheduling(); + } + + const createDep = (cleanup, computed) => { + const dep = /* @__PURE__ */ new Map(); + dep.cleanup = cleanup; + dep.computed = computed; + return dep; + }; + + const targetMap = /* @__PURE__ */ new WeakMap(); + const ITERATE_KEY = Symbol("iterate" ); + const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" ); function track(target, type, key) { if (shouldTrack && activeEffect) { let depsMap = targetMap.get(target); @@ -566,35 +683,17 @@ var Vue = (function (exports) { } let dep = depsMap.get(key); if (!dep) { - depsMap.set(key, dep = createDep()); - } - const eventInfo = { effect: activeEffect, target, type, key } ; - trackEffects(dep, eventInfo); - } - } - function trackEffects(dep, debuggerEventExtraInfo) { - let shouldTrack2 = false; - if (effectTrackDepth <= maxMarkerBits) { - if (!newTracked(dep)) { - dep.n |= trackOpBit; - shouldTrack2 = !wasTracked(dep); - } - } else { - shouldTrack2 = !dep.has(activeEffect); - } - if (shouldTrack2) { - dep.add(activeEffect); - activeEffect.deps.push(dep); - if (activeEffect.onTrack) { - activeEffect.onTrack( - extend( - { - effect: activeEffect - }, - debuggerEventExtraInfo - ) - ); + depsMap.set(key, dep = createDep(() => depsMap.delete(key))); } + trackEffect( + activeEffect, + dep, + { + target, + type, + key + } + ); } } function trigger(target, type, key, newValue, oldValue, oldTarget) { @@ -642,53 +741,28 @@ var Vue = (function (exports) { break; } } - const eventInfo = { target, type, key, newValue, oldValue, oldTarget } ; - if (deps.length === 1) { - if (deps[0]) { - { - triggerEffects(deps[0], eventInfo); - } - } - } else { - const effects = []; - for (const dep of deps) { - if (dep) { - effects.push(...dep); - } - } - { - triggerEffects(createDep(effects), eventInfo); - } - } - } - function triggerEffects(dep, debuggerEventExtraInfo) { - const effects = isArray(dep) ? dep : [...dep]; - for (const effect2 of effects) { - if (effect2.computed) { - triggerEffect(effect2, debuggerEventExtraInfo); - } - } - for (const effect2 of effects) { - if (!effect2.computed) { - triggerEffect(effect2, debuggerEventExtraInfo); - } - } - } - function triggerEffect(effect2, debuggerEventExtraInfo) { - if (effect2 !== activeEffect || effect2.allowRecurse) { - if (effect2.onTrigger) { - effect2.onTrigger(extend({ effect: effect2 }, debuggerEventExtraInfo)); - } - if (effect2.scheduler) { - effect2.scheduler(); - } else { - effect2.run(); + pauseScheduling(); + for (const dep of deps) { + if (dep) { + triggerEffects( + dep, + 4, + { + target, + type, + key, + newValue, + oldValue, + oldTarget + } + ); } } + resetScheduling(); } function getDepFromReactive(object, key) { - var _a; - return (_a = targetMap.get(object)) == null ? void 0 : _a.get(key); + const depsMap = targetMap.get(object); + return depsMap && depsMap.get(key); } const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`); @@ -715,7 +789,9 @@ var Vue = (function (exports) { ["push", "pop", "shift", "unshift", "splice"].forEach((key) => { instrumentations[key] = function(...args) { pauseTracking(); + pauseScheduling(); const res = toRaw(this)[key].apply(this, args); + resetScheduling(); resetTracking(); return res; }; @@ -723,25 +799,32 @@ var Vue = (function (exports) { return instrumentations; } function hasOwnProperty(key) { + if (!isSymbol(key)) + key = String(key); const obj = toRaw(this); track(obj, "has", key); return obj.hasOwnProperty(key); } class BaseReactiveHandler { - constructor(_isReadonly = false, _shallow = false) { + constructor(_isReadonly = false, _isShallow = false) { this._isReadonly = _isReadonly; - this._shallow = _shallow; + this._isShallow = _isShallow; } get(target, key, receiver) { - const isReadonly2 = this._isReadonly, shallow = this._shallow; + const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow; if (key === "__v_isReactive") { return !isReadonly2; } else if (key === "__v_isReadonly") { return isReadonly2; } else if (key === "__v_isShallow") { - return shallow; - } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) { - return target; + return isShallow2; + } else if (key === "__v_raw") { + if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype + // this means the reciever is a user proxy of the reactive proxy + Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) { + return target; + } + return; } const targetIsArray = isArray(target); if (!isReadonly2) { @@ -759,7 +842,7 @@ var Vue = (function (exports) { if (!isReadonly2) { track(target, "get", key); } - if (shallow) { + if (isShallow2) { return res; } if (isRef(res)) { @@ -772,22 +855,24 @@ var Vue = (function (exports) { } } class MutableReactiveHandler extends BaseReactiveHandler { - constructor(shallow = false) { - super(false, shallow); + constructor(isShallow2 = false) { + super(false, isShallow2); } set(target, key, value, receiver) { let oldValue = target[key]; - if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) { - return false; - } - if (!this._shallow) { + if (!this._isShallow) { + const isOldValueReadonly = isReadonly(oldValue); if (!isShallow(value) && !isReadonly(value)) { oldValue = toRaw(oldValue); value = toRaw(value); } if (!isArray(target) && isRef(oldValue) && !isRef(value)) { - oldValue.value = value; - return true; + if (isOldValueReadonly) { + return false; + } else { + oldValue.value = value; + return true; + } } } const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key); @@ -827,12 +912,12 @@ var Vue = (function (exports) { } } class ReadonlyReactiveHandler extends BaseReactiveHandler { - constructor(shallow = false) { - super(true, shallow); + constructor(isShallow2 = false) { + super(true, isShallow2); } set(target, key) { { - warn$1( + warn$2( `Set operation on key "${String(key)}" failed: target is readonly.`, target ); @@ -841,7 +926,7 @@ var Vue = (function (exports) { } deleteProperty(target, key) { { - warn$1( + warn$2( `Delete operation on key "${String(key)}" failed: target is readonly.`, target ); @@ -999,7 +1084,7 @@ var Vue = (function (exports) { return function(...args) { { const key = args[0] ? `on key "${args[0]}" ` : ``; - console.warn( + warn$2( `${capitalize(type)} operation ${key}failed: target is readonly.`, toRaw(this) ); @@ -1068,23 +1153,16 @@ var Vue = (function (exports) { clear: createReadonlyMethod("clear"), forEach: createForEach(true, true) }; - const iteratorMethods = ["keys", "values", "entries", Symbol.iterator]; + const iteratorMethods = [ + "keys", + "values", + "entries", + Symbol.iterator + ]; iteratorMethods.forEach((method) => { - mutableInstrumentations2[method] = createIterableMethod( - method, - false, - false - ); - readonlyInstrumentations2[method] = createIterableMethod( - method, - true, - false - ); - shallowInstrumentations2[method] = createIterableMethod( - method, - false, - true - ); + mutableInstrumentations2[method] = createIterableMethod(method, false, false); + readonlyInstrumentations2[method] = createIterableMethod(method, true, false); + shallowInstrumentations2[method] = createIterableMethod(method, false, true); shallowReadonlyInstrumentations2[method] = createIterableMethod( method, true, @@ -1137,7 +1215,7 @@ var Vue = (function (exports) { const rawKey = toRaw(key); if (rawKey !== key && has2.call(target, rawKey)) { const type = toRawType(target); - console.warn( + warn$2( `Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.` ); } @@ -1206,7 +1284,7 @@ var Vue = (function (exports) { function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) { if (!isObject(target)) { { - console.warn(`value cannot be made reactive: ${String(target)}`); + warn$2(`value cannot be made reactive: ${String(target)}`); } return target; } @@ -1241,43 +1319,121 @@ var Vue = (function (exports) { return !!(value && value["__v_isShallow"]); } function isProxy(value) { - return isReactive(value) || isReadonly(value); + return value ? !!value["__v_raw"] : false; } function toRaw(observed) { const raw = observed && observed["__v_raw"]; return raw ? toRaw(raw) : observed; } function markRaw(value) { - def(value, "__v_skip", true); + if (Object.isExtensible(value)) { + def(value, "__v_skip", true); + } return value; } const toReactive = (value) => isObject(value) ? reactive(value) : value; const toReadonly = (value) => isObject(value) ? readonly(value) : value; + const COMPUTED_SIDE_EFFECT_WARN = `Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided. Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`; + class ComputedRefImpl { + constructor(getter, _setter, isReadonly, isSSR) { + this.getter = getter; + this._setter = _setter; + this.dep = void 0; + this.__v_isRef = true; + this["__v_isReadonly"] = false; + this.effect = new ReactiveEffect( + () => getter(this._value), + () => triggerRefValue( + this, + this.effect._dirtyLevel === 2 ? 2 : 3 + ) + ); + this.effect.computed = this; + this.effect.active = this._cacheable = !isSSR; + this["__v_isReadonly"] = isReadonly; + } + get value() { + const self = toRaw(this); + if ((!self._cacheable || self.effect.dirty) && hasChanged(self._value, self._value = self.effect.run())) { + triggerRefValue(self, 4); + } + trackRefValue(self); + if (self.effect._dirtyLevel >= 2) { + if (this._warnRecursive) { + warn$2(COMPUTED_SIDE_EFFECT_WARN, ` + +getter: `, this.getter); + } + triggerRefValue(self, 2); + } + return self._value; + } + set value(newValue) { + this._setter(newValue); + } + // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x + get _dirty() { + return this.effect.dirty; + } + set _dirty(v) { + this.effect.dirty = v; + } + // #endregion + } + function computed$1(getterOrOptions, debugOptions, isSSR = false) { + let getter; + let setter; + const onlyGetter = isFunction(getterOrOptions); + if (onlyGetter) { + getter = getterOrOptions; + setter = () => { + warn$2("Write operation failed: computed value is readonly"); + } ; + } else { + getter = getterOrOptions.get; + setter = getterOrOptions.set; + } + const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR); + if (debugOptions && !isSSR) { + cRef.effect.onTrack = debugOptions.onTrack; + cRef.effect.onTrigger = debugOptions.onTrigger; + } + return cRef; + } + function trackRefValue(ref2) { + var _a; if (shouldTrack && activeEffect) { ref2 = toRaw(ref2); - { - trackEffects(ref2.dep || (ref2.dep = createDep()), { + trackEffect( + activeEffect, + (_a = ref2.dep) != null ? _a : ref2.dep = createDep( + () => ref2.dep = void 0, + ref2 instanceof ComputedRefImpl ? ref2 : void 0 + ), + { target: ref2, type: "get", key: "value" - }); - } + } + ); } } - function triggerRefValue(ref2, newVal) { + function triggerRefValue(ref2, dirtyLevel = 4, newVal) { ref2 = toRaw(ref2); const dep = ref2.dep; if (dep) { - { - triggerEffects(dep, { + triggerEffects( + dep, + dirtyLevel, + { target: ref2, type: "set", key: "value", newValue: newVal - }); - } + } + ); } } function isRef(r) { @@ -1313,12 +1469,12 @@ var Vue = (function (exports) { if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal; this._value = useDirectValue ? newVal : toReactive(newVal); - triggerRefValue(this, newVal); + triggerRefValue(this, 4, newVal); } } } function triggerRef(ref2) { - triggerRefValue(ref2, ref2.value ); + triggerRefValue(ref2, 4, ref2.value ); } function unref(ref2) { return isRef(ref2) ? ref2.value : ref2; @@ -1364,7 +1520,7 @@ var Vue = (function (exports) { } function toRefs(object) { if (!isProxy(object)) { - console.warn(`toRefs() expects a reactive object but received a plain one.`); + warn$2(`toRefs() expects a reactive object but received a plain one.`); } const ret = isArray(object) ? new Array(object.length) : {}; for (const key in object) { @@ -1416,67 +1572,28 @@ var Vue = (function (exports) { return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue); } - class ComputedRefImpl { - constructor(getter, _setter, isReadonly, isSSR) { - this._setter = _setter; - this.dep = void 0; - this.__v_isRef = true; - this["__v_isReadonly"] = false; - this._dirty = true; - this.effect = new ReactiveEffect(getter, () => { - if (!this._dirty) { - this._dirty = true; - triggerRefValue(this); - } - }); - this.effect.computed = this; - this.effect.active = this._cacheable = !isSSR; - this["__v_isReadonly"] = isReadonly; - } - get value() { - const self = toRaw(this); - trackRefValue(self); - if (self._dirty || !self._cacheable) { - self._dirty = false; - self._value = self.effect.run(); - } - return self._value; - } - set value(newValue) { - this._setter(newValue); - } - } - function computed$1(getterOrOptions, debugOptions, isSSR = false) { - let getter; - let setter; - const onlyGetter = isFunction(getterOrOptions); - if (onlyGetter) { - getter = getterOrOptions; - setter = () => { - console.warn("Write operation failed: computed value is readonly"); - } ; - } else { - getter = getterOrOptions.get; - setter = getterOrOptions.set; - } - const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR); - if (debugOptions && !isSSR) { - cRef.effect.onTrack = debugOptions.onTrack; - cRef.effect.onTrigger = debugOptions.onTrigger; - } - return cRef; - } + const TrackOpTypes = { + "GET": "get", + "HAS": "has", + "ITERATE": "iterate" + }; + const TriggerOpTypes = { + "SET": "set", + "ADD": "add", + "DELETE": "delete", + "CLEAR": "clear" + }; - const stack = []; + const stack$1 = []; function pushWarningContext(vnode) { - stack.push(vnode); + stack$1.push(vnode); } function popWarningContext() { - stack.pop(); + stack$1.pop(); } - function warn(msg, ...args) { + function warn$1(msg, ...args) { pauseTracking(); - const instance = stack.length ? stack[stack.length - 1].component : null; + const instance = stack$1.length ? stack$1[stack$1.length - 1].component : null; const appWarnHandler = instance && instance.appContext.config.warnHandler; const trace = getComponentTrace(); if (appWarnHandler) { @@ -1485,7 +1602,10 @@ var Vue = (function (exports) { instance, 11, [ - msg + args.join(""), + msg + args.map((a) => { + var _a, _b; + return (_b = (_a = a.toString) == null ? void 0 : _a.call(a)) != null ? _b : JSON.stringify(a); + }).join(""), instance && instance.proxy, trace.map( ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>` @@ -1505,7 +1625,7 @@ var Vue = (function (exports) { resetTracking(); } function getComponentTrace() { - let currentVNode = stack[stack.length - 1]; + let currentVNode = stack$1[stack$1.length - 1]; if (!currentVNode) { return []; } @@ -1575,13 +1695,45 @@ var Vue = (function (exports) { if (val === void 0) { return; } else if (typeof val !== "number") { - warn(`${type} is not a valid number - got ${JSON.stringify(val)}.`); + warn$1(`${type} is not a valid number - got ${JSON.stringify(val)}.`); } else if (isNaN(val)) { - warn(`${type} is NaN - the duration expression might be incorrect.`); + warn$1(`${type} is NaN - the duration expression might be incorrect.`); } } - const ErrorTypeStrings = { + const ErrorCodes = { + "SETUP_FUNCTION": 0, + "0": "SETUP_FUNCTION", + "RENDER_FUNCTION": 1, + "1": "RENDER_FUNCTION", + "WATCH_GETTER": 2, + "2": "WATCH_GETTER", + "WATCH_CALLBACK": 3, + "3": "WATCH_CALLBACK", + "WATCH_CLEANUP": 4, + "4": "WATCH_CLEANUP", + "NATIVE_EVENT_HANDLER": 5, + "5": "NATIVE_EVENT_HANDLER", + "COMPONENT_EVENT_HANDLER": 6, + "6": "COMPONENT_EVENT_HANDLER", + "VNODE_HOOK": 7, + "7": "VNODE_HOOK", + "DIRECTIVE_HOOK": 8, + "8": "DIRECTIVE_HOOK", + "TRANSITION_HOOK": 9, + "9": "TRANSITION_HOOK", + "APP_ERROR_HANDLER": 10, + "10": "APP_ERROR_HANDLER", + "APP_WARN_HANDLER": 11, + "11": "APP_WARN_HANDLER", + "FUNCTION_REF": 12, + "12": "FUNCTION_REF", + "ASYNC_COMPONENT_LOADER": 13, + "13": "ASYNC_COMPONENT_LOADER", + "SCHEDULER": 14, + "14": "SCHEDULER" + }; + const ErrorTypeStrings$1 = { ["sp"]: "serverPrefetch hook", ["bc"]: "beforeCreate hook", ["c"]: "created hook", @@ -1610,16 +1762,14 @@ var Vue = (function (exports) { [11]: "app warnHandler", [12]: "ref function", [13]: "async component loader", - [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core" + [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ." }; function callWithErrorHandling(fn, instance, type, args) { - let res; try { - res = args ? fn(...args) : fn(); + return args ? fn(...args) : fn(); } catch (err) { handleError(err, instance, type); } - return res; } function callWithAsyncErrorHandling(fn, instance, type, args) { if (isFunction(fn)) { @@ -1631,18 +1781,24 @@ var Vue = (function (exports) { } return res; } - const values = []; - for (let i = 0; i < fn.length; i++) { - values.push(callWithAsyncErrorHandling(fn[i], instance, type, args)); + if (isArray(fn)) { + const values = []; + for (let i = 0; i < fn.length; i++) { + values.push(callWithAsyncErrorHandling(fn[i], instance, type, args)); + } + return values; + } else { + warn$1( + `Invalid value type passed to callWithAsyncErrorHandling(): ${typeof fn}` + ); } - return values; } function handleError(err, instance, type, throwInDev = true) { const contextVNode = instance ? instance.vnode : null; if (instance) { let cur = instance.parent; const exposedInstance = instance.proxy; - const errorInfo = ErrorTypeStrings[type] ; + const errorInfo = ErrorTypeStrings$1[type] ; while (cur) { const errorCapturedHooks = cur.ec; if (errorCapturedHooks) { @@ -1656,12 +1812,14 @@ var Vue = (function (exports) { } const appErrorHandler = instance.appContext.config.errorHandler; if (appErrorHandler) { + pauseTracking(); callWithErrorHandling( appErrorHandler, null, 10, [err, exposedInstance, errorInfo] ); + resetTracking(); return; } } @@ -1669,11 +1827,11 @@ var Vue = (function (exports) { } function logError(err, type, contextVNode, throwInDev = true) { { - const info = ErrorTypeStrings[type]; + const info = ErrorTypeStrings$1[type]; if (contextVNode) { pushWarningContext(contextVNode); } - warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`); + warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`); if (contextVNode) { popWarningContext(); } @@ -1752,13 +1910,16 @@ var Vue = (function (exports) { } queueFlush(); } - function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) { + function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) { { seen = seen || /* @__PURE__ */ new Map(); } for (; i < queue.length; i++) { const cb = queue[i]; if (cb && cb.pre) { + if (instance && cb.id !== instance.uid) { + continue; + } if (checkRecursiveUpdates(seen, cb)) { continue; } @@ -1770,7 +1931,9 @@ var Vue = (function (exports) { } function flushPostFlushCbs(seen) { if (pendingPostFlushCbs.length) { - const deduped = [...new Set(pendingPostFlushCbs)]; + const deduped = [...new Set(pendingPostFlushCbs)].sort( + (a, b) => getId(a) - getId(b) + ); pendingPostFlushCbs.length = 0; if (activePostFlushCbs) { activePostFlushCbs.push(...deduped); @@ -1780,7 +1943,6 @@ var Vue = (function (exports) { { seen = seen || /* @__PURE__ */ new Map(); } - activePostFlushCbs.sort((a, b) => getId(a) - getId(b)); for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) { if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) { continue; @@ -1839,8 +2001,10 @@ var Vue = (function (exports) { if (count > RECURSION_LIMIT) { const instance = fn.ownerInstance; const componentName = instance && getComponentName(instance.type); - warn( - `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.` + handleError( + `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`, + null, + 10 ); return true; } else { @@ -1897,6 +2061,7 @@ var Vue = (function (exports) { } instance.renderCache = []; isHmrUpdating = true; + instance.effect.dirty = true; instance.update(); isHmrUpdating = false; }); @@ -1924,6 +2089,7 @@ var Vue = (function (exports) { instance.ceReload(newComp.styles); hmrDirtyComponents.delete(oldComp); } else if (instance.parent) { + instance.parent.effect.dirty = true; queueJob(instance.parent.update); } else if (instance.appContext.reload) { instance.appContext.reload(); @@ -1964,22 +2130,22 @@ var Vue = (function (exports) { }; } - exports.devtools = void 0; + let devtools$1; let buffer = []; let devtoolsNotInstalled = false; function emit$1(event, ...args) { - if (exports.devtools) { - exports.devtools.emit(event, ...args); + if (devtools$1) { + devtools$1.emit(event, ...args); } else if (!devtoolsNotInstalled) { buffer.push({ event, args }); } } - function setDevtoolsHook(hook, target) { + function setDevtoolsHook$1(hook, target) { var _a, _b; - exports.devtools = hook; - if (exports.devtools) { - exports.devtools.enabled = true; - buffer.forEach(({ event, args }) => exports.devtools.emit(event, ...args)); + devtools$1 = hook; + if (devtools$1) { + devtools$1.enabled = true; + buffer.forEach(({ event, args }) => devtools$1.emit(event, ...args)); buffer = []; } else if ( // handle late devtools injection - only do this if we are in an actual @@ -1991,10 +2157,10 @@ var Vue = (function (exports) { ) { const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || []; replay.push((newHook) => { - setDevtoolsHook(newHook, target); + setDevtoolsHook$1(newHook, target); }); setTimeout(() => { - if (!exports.devtools) { + if (!devtools$1) { target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null; devtoolsNotInstalled = true; buffer = []; @@ -2024,11 +2190,13 @@ var Vue = (function (exports) { "component:removed" /* COMPONENT_REMOVED */ ); const devtoolsComponentRemoved = (component) => { - if (exports.devtools && typeof exports.devtools.cleanupBuffer === "function" && // remove the component if it wasn't buffered - !exports.devtools.cleanupBuffer(component)) { + if (devtools$1 && typeof devtools$1.cleanupBuffer === "function" && // remove the component if it wasn't buffered + !devtools$1.cleanupBuffer(component)) { _devtoolsComponentRemoved(component); } }; + /*! #__NO_SIDE_EFFECTS__ */ + // @__NO_SIDE_EFFECTS__ function createDevtoolsComponentHook(hook) { return (component) => { emit$1( @@ -2073,7 +2241,7 @@ var Vue = (function (exports) { if (emitsOptions) { if (!(event in emitsOptions) && true) { if (!propsOptions || !(toHandlerKey(event) in propsOptions)) { - warn( + warn$1( `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.` ); } @@ -2082,7 +2250,7 @@ var Vue = (function (exports) { if (isFunction(validator)) { const isValid = validator(...rawArgs); if (!isValid) { - warn( + warn$1( `Invalid event arguments: event validation failed for event "${event}".` ); } @@ -2109,11 +2277,13 @@ var Vue = (function (exports) { { const lowerCaseEvent = event.toLowerCase(); if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) { - warn( + warn$1( `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName( instance, instance.type - )} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate(event)}" instead of "${event}".` + )} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate( + event + )}" instead of "${event}".` ); } } @@ -2254,21 +2424,21 @@ var Vue = (function (exports) { vnode, proxy, withProxy, - props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, + props, data, setupState, ctx, inheritAttrs } = instance; + const prev = setCurrentRenderingInstance(instance); let result; let fallthroughAttrs; - const prev = setCurrentRenderingInstance(instance); { accessedAttrs = false; } @@ -2277,7 +2447,7 @@ var Vue = (function (exports) { const proxyToUse = withProxy || proxy; const thisProxy = setupState.__isScriptSetup ? new Proxy(proxyToUse, { get(target, key, receiver) { - warn( + warn$1( `Property '${String( key )}' was accessed via 'this'. Avoid using 'this' in templates.` @@ -2290,7 +2460,7 @@ var Vue = (function (exports) { thisProxy, proxyToUse, renderCache, - props, + true ? shallowReadonly(props) : props, setupState, data, ctx @@ -2304,19 +2474,18 @@ var Vue = (function (exports) { } result = normalizeVNode( render2.length > 1 ? render2( - props, + true ? shallowReadonly(props) : props, true ? { get attrs() { markAttrsAccessed(); - return attrs; + return shallowReadonly(attrs); }, slots, emit } : { attrs, slots, emit } ) : render2( - props, + true ? shallowReadonly(props) : props, null - /* we know it doesn't need it */ ) ); fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs); @@ -2342,7 +2511,7 @@ var Vue = (function (exports) { propsOptions ); } - root = cloneVNode(root, fallthroughAttrs); + root = cloneVNode(root, fallthroughAttrs, false, true); } else if (!accessedAttrs && root.type !== Comment) { const allAttrs = Object.keys(attrs); const eventAttrs = []; @@ -2358,12 +2527,12 @@ var Vue = (function (exports) { } } if (extraAttrs.length) { - warn( + warn$1( `Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.` ); } if (eventAttrs.length) { - warn( + warn$1( `Extraneous non-emits event listeners (${eventAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.` ); } @@ -2372,16 +2541,16 @@ var Vue = (function (exports) { } if (vnode.dirs) { if (!isElementRoot(root)) { - warn( + warn$1( `Runtime directive used on component with non-element root node. The directives will not function as intended.` ); } - root = cloneVNode(root); + root = cloneVNode(root, null, false, true); root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs; } if (vnode.transition) { if (!isElementRoot(root)) { - warn( + warn$1( `Component inside renders non-element root node that cannot be animated.` ); } @@ -2398,9 +2567,11 @@ var Vue = (function (exports) { const getChildRoot = (vnode) => { const rawChildren = vnode.children; const dynamicChildren = vnode.dynamicChildren; - const childRoot = filterSingleRoot(rawChildren); + const childRoot = filterSingleRoot(rawChildren, false); if (!childRoot) { return [vnode, void 0]; + } else if (childRoot.patchFlag > 0 && childRoot.patchFlag & 2048) { + return getChildRoot(childRoot); } const index = rawChildren.indexOf(childRoot); const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1; @@ -2416,7 +2587,7 @@ var Vue = (function (exports) { }; return [normalizeVNode(childRoot), setRoot]; }; - function filterSingleRoot(children) { + function filterSingleRoot(children, recurse = true) { let singleRoot; for (let i = 0; i < children.length; i++) { const child = children[i]; @@ -2426,6 +2597,9 @@ var Vue = (function (exports) { return; } else { singleRoot = child; + if (recurse && singleRoot.patchFlag > 0 && singleRoot.patchFlag & 2048) { + return filterSingleRoot(singleRoot.children); + } } } } else { @@ -2516,9 +2690,17 @@ var Vue = (function (exports) { return false; } function updateHOCHostEl({ vnode, parent }, el) { - while (parent && parent.subTree === vnode) { - (vnode = parent.vnode).el = el; - parent = parent.parent; + while (parent) { + const root = parent.subTree; + if (root.suspense && root.suspense.activeBranch === vnode) { + root.el = vnode.el; + } + if (root === vnode) { + (vnode = parent.vnode).el = el; + parent = parent.parent; + } else { + break; + } } } @@ -2546,7 +2728,6 @@ var Vue = (function (exports) { const selfName = getComponentName( Component, false - /* do not include inferred name to avoid breaking existing code */ ); if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) { return Component; @@ -2564,11 +2745,11 @@ var Vue = (function (exports) { if (warnMissing && !res) { const extra = type === COMPONENTS ? ` If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``; - warn(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`); + warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`); } return res; } else { - warn( + warn$1( `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().` ); } @@ -2578,6 +2759,7 @@ If this is a native custom element, make sure to exclude it from component resol } const isSuspense = (type) => type.__isSuspense; + let suspenseId = 0; const SuspenseImpl = { name: "Suspense", // In order to make Suspense tree-shakable, we need to avoid importing it @@ -2585,7 +2767,7 @@ If this is a native custom element, make sure to exclude it from component resol // on a vnode's type and calls the `process` method, passing in renderer // internals. __isSuspense: true, - process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) { + process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) { if (n1 == null) { mountSuspense( n2, @@ -2593,19 +2775,25 @@ If this is a native custom element, make sure to exclude it from component resol anchor, parentComponent, parentSuspense, - isSVG, + namespace, slotScopeIds, optimized, rendererInternals ); } else { + if (parentSuspense && parentSuspense.deps > 0 && !n1.suspense.isInFallback) { + n2.suspense = n1.suspense; + n2.suspense.vnode = n2; + n2.el = n1.el; + return; + } patchSuspense( n1, n2, container, anchor, parentComponent, - isSVG, + namespace, slotScopeIds, optimized, rendererInternals @@ -2623,7 +2811,7 @@ If this is a native custom element, make sure to exclude it from component resol eventListener(); } } - function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) { + function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) { const { p: patch, o: { createElement } @@ -2636,7 +2824,7 @@ If this is a native custom element, make sure to exclude it from component resol container, hiddenContainer, anchor, - isSVG, + namespace, slotScopeIds, optimized, rendererInternals @@ -2648,7 +2836,7 @@ If this is a native custom element, make sure to exclude it from component resol null, parentComponent, suspense, - isSVG, + namespace, slotScopeIds ); if (suspense.deps > 0) { @@ -2662,7 +2850,7 @@ If this is a native custom element, make sure to exclude it from component resol parentComponent, null, // fallback tree will not have suspense context - isSVG, + namespace, slotScopeIds ); setActiveBranch(suspense, vnode.ssFallback); @@ -2670,7 +2858,7 @@ If this is a native custom element, make sure to exclude it from component resol suspense.resolve(false, true); } } - function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) { + function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) { const suspense = n2.suspense = n1.suspense; suspense.vnode = n2; n2.el = n1.el; @@ -2687,29 +2875,31 @@ If this is a native custom element, make sure to exclude it from component resol null, parentComponent, suspense, - isSVG, + namespace, slotScopeIds, optimized ); if (suspense.deps <= 0) { suspense.resolve(); } else if (isInFallback) { - patch( - activeBranch, - newFallback, - container, - anchor, - parentComponent, - null, - // fallback tree will not have suspense context - isSVG, - slotScopeIds, - optimized - ); - setActiveBranch(suspense, newFallback); + if (!isHydrating) { + patch( + activeBranch, + newFallback, + container, + anchor, + parentComponent, + null, + // fallback tree will not have suspense context + namespace, + slotScopeIds, + optimized + ); + setActiveBranch(suspense, newFallback); + } } } else { - suspense.pendingId++; + suspense.pendingId = suspenseId++; if (isHydrating) { suspense.isHydrating = false; suspense.activeBranch = pendingBranch; @@ -2727,7 +2917,7 @@ If this is a native custom element, make sure to exclude it from component resol null, parentComponent, suspense, - isSVG, + namespace, slotScopeIds, optimized ); @@ -2742,7 +2932,7 @@ If this is a native custom element, make sure to exclude it from component resol parentComponent, null, // fallback tree will not have suspense context - isSVG, + namespace, slotScopeIds, optimized ); @@ -2756,7 +2946,7 @@ If this is a native custom element, make sure to exclude it from component resol anchor, parentComponent, suspense, - isSVG, + namespace, slotScopeIds, optimized ); @@ -2769,7 +2959,7 @@ If this is a native custom element, make sure to exclude it from component resol null, parentComponent, suspense, - isSVG, + namespace, slotScopeIds, optimized ); @@ -2787,7 +2977,7 @@ If this is a native custom element, make sure to exclude it from component resol anchor, parentComponent, suspense, - isSVG, + namespace, slotScopeIds, optimized ); @@ -2795,7 +2985,11 @@ If this is a native custom element, make sure to exclude it from component resol } else { triggerEvent(n2, "onPending"); suspense.pendingBranch = newBranch; - suspense.pendingId++; + if (newBranch.shapeFlag & 512) { + suspense.pendingId = newBranch.component.suspenseId; + } else { + suspense.pendingId = suspenseId++; + } patch( null, newBranch, @@ -2803,7 +2997,7 @@ If this is a native custom element, make sure to exclude it from component resol null, parentComponent, suspense, - isSVG, + namespace, slotScopeIds, optimized ); @@ -2825,7 +3019,7 @@ If this is a native custom element, make sure to exclude it from component resol } } let hasWarned = false; - function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) { + function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, namespace, slotScopeIds, optimized, rendererInternals, isHydrating = false) { if (!hasWarned) { hasWarned = true; console[console.info ? "info" : "log"]( @@ -2842,7 +3036,7 @@ If this is a native custom element, make sure to exclude it from component resol let parentSuspenseId; const isSuspensible = isVNodeSuspensible(vnode); if (isSuspensible) { - if (parentSuspense == null ? void 0 : parentSuspense.pendingBranch) { + if (parentSuspense && parentSuspense.pendingBranch) { parentSuspenseId = parentSuspense.pendingId; parentSuspense.deps++; } @@ -2851,20 +3045,20 @@ If this is a native custom element, make sure to exclude it from component resol { assertNumber(timeout, `Suspense timeout`); } + const initialAnchor = anchor; const suspense = { vnode, parent: parentSuspense, parentComponent, - isSVG, + namespace, container, hiddenContainer, - anchor, deps: 0, - pendingId: 0, + pendingId: suspenseId++, timeout: typeof timeout === "number" ? timeout : -1, activeBranch: null, pendingBranch: null, - isInFallback: true, + isInFallback: !isHydrating, isHydrating, isUnmounted: false, effects: [], @@ -2898,18 +3092,24 @@ If this is a native custom element, make sure to exclude it from component resol if (delayEnter) { activeBranch.transition.afterLeave = () => { if (pendingId === suspense.pendingId) { - move(pendingBranch, container2, anchor2, 0); + move( + pendingBranch, + container2, + anchor === initialAnchor ? next(activeBranch) : anchor, + 0 + ); queuePostFlushCb(effects); } }; } - let { anchor: anchor2 } = suspense; if (activeBranch) { - anchor2 = next(activeBranch); + if (parentNode(activeBranch.el) !== suspense.hiddenContainer) { + anchor = next(activeBranch); + } unmount(activeBranch, parentComponent2, suspense, true); } if (!delayEnter) { - move(pendingBranch, container2, anchor2, 0); + move(pendingBranch, container2, anchor, 0); } } setActiveBranch(suspense, pendingBranch); @@ -2943,7 +3143,7 @@ If this is a native custom element, make sure to exclude it from component resol if (!suspense.pendingBranch) { return; } - const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense; + const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, namespace: namespace2 } = suspense; triggerEvent(vnode2, "onFallback"); const anchor2 = next(activeBranch); const mountFallback = () => { @@ -2958,7 +3158,7 @@ If this is a native custom element, make sure to exclude it from component resol parentComponent2, null, // fallback tree will not have suspense context - isSVG2, + namespace2, slotScopeIds, optimized ); @@ -3021,7 +3221,7 @@ If this is a native custom element, make sure to exclude it from component resol // consider the comment placeholder case. hydratedEl ? null : next(instance.subTree), suspense, - isSVG, + namespace, optimized ); if (placeholder) { @@ -3058,20 +3258,20 @@ If this is a native custom element, make sure to exclude it from component resol }; return suspense; } - function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals, hydrateNode) { + function hydrateSuspense(node, vnode, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals, hydrateNode) { const suspense = vnode.suspense = createSuspenseBoundary( vnode, parentSuspense, parentComponent, node.parentNode, + // eslint-disable-next-line no-restricted-globals document.createElement("div"), null, - isSVG, + namespace, slotScopeIds, optimized, rendererInternals, true - /* hydrating */ ); const result = hydrateNode( node, @@ -3112,7 +3312,7 @@ If this is a native custom element, make sure to exclude it from component resol if (isArray(s)) { const singleChild = filterSingleRoot(s); if (!singleChild && s.filter((child) => child !== NULL_DYNAMIC_COMPONENT).length > 0) { - warn(` slots expect a single root node.`); + warn$1(` slots expect a single root node.`); } s = singleChild; } @@ -3136,17 +3336,29 @@ If this is a native custom element, make sure to exclude it from component resol function setActiveBranch(suspense, branch) { suspense.activeBranch = branch; const { vnode, parentComponent } = suspense; - const el = vnode.el = branch.el; + let el = branch.el; + while (!el && branch.component) { + branch = branch.component.subTree; + el = branch.el; + } + vnode.el = el; if (parentComponent && parentComponent.subTree === vnode) { parentComponent.vnode.el = el; updateHOCHostEl(parentComponent, el); } } function isVNodeSuspensible(vnode) { - var _a; - return ((_a = vnode.props) == null ? void 0 : _a.suspensible) != null && vnode.props.suspensible !== false; + const suspensible = vnode.props && vnode.props.suspensible; + return suspensible != null && suspensible !== false; } + const ssrContextKey = Symbol.for("v-scx"); + const useSSRContext = () => { + { + warn$1(`useSSRContext() is not supported in the global build.`); + } + }; + function watchEffect(effect, options) { return doWatch(effect, null, options); } @@ -3167,34 +3379,61 @@ If this is a native custom element, make sure to exclude it from component resol const INITIAL_WATCHER_VALUE = {}; function watch(source, cb, options) { if (!isFunction(cb)) { - warn( + warn$1( `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.` ); } return doWatch(source, cb, options); } - function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) { - var _a; + function doWatch(source, cb, { + immediate, + deep, + flush, + once, + onTrack, + onTrigger + } = EMPTY_OBJ) { + if (cb && once) { + const _cb = cb; + cb = (...args) => { + _cb(...args); + unwatch(); + }; + } + if (deep !== void 0 && typeof deep === "number") { + warn$1( + `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.` + ); + } if (!cb) { if (immediate !== void 0) { - warn( + warn$1( `watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.` ); } if (deep !== void 0) { - warn( + warn$1( `watch() "deep" option is only respected when using the watch(source, callback, options?) signature.` ); } + if (once !== void 0) { + warn$1( + `watch() "once" option is only respected when using the watch(source, callback, options?) signature.` + ); + } } const warnInvalidSource = (s) => { - warn( + warn$1( `Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.` ); }; - const instance = getCurrentScope() === ((_a = currentInstance) == null ? void 0 : _a.scope) ? currentInstance : null; + const instance = currentInstance; + const reactiveGetter = (source2) => deep === true ? source2 : ( + // for deep: false, only traverse root-level properties + traverse(source2, deep === false ? 1 : void 0) + ); let getter; let forceTrigger = false; let isMultiSource = false; @@ -3202,8 +3441,8 @@ If this is a native custom element, make sure to exclude it from component resol getter = () => source.value; forceTrigger = isShallow(source); } else if (isReactive(source)) { - getter = () => source; - deep = true; + getter = () => reactiveGetter(source); + forceTrigger = true; } else if (isArray(source)) { isMultiSource = true; forceTrigger = source.some((s) => isReactive(s) || isShallow(s)); @@ -3211,7 +3450,7 @@ If this is a native custom element, make sure to exclude it from component resol if (isRef(s)) { return s.value; } else if (isReactive(s)) { - return traverse(s); + return reactiveGetter(s); } else if (isFunction(s)) { return callWithErrorHandling(s, instance, 2); } else { @@ -3223,9 +3462,6 @@ If this is a native custom element, make sure to exclude it from component resol getter = () => callWithErrorHandling(source, instance, 2); } else { getter = () => { - if (instance && instance.isUnmounted) { - return; - } if (cleanup) { cleanup(); } @@ -3254,7 +3490,7 @@ If this is a native custom element, make sure to exclude it from component resol }; let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE; const job = () => { - if (!effect.active) { + if (!effect.active || !effect.dirty) { return; } if (cb) { @@ -3287,7 +3523,14 @@ If this is a native custom element, make sure to exclude it from component resol job.id = instance.uid; scheduler = () => queueJob(job); } - const effect = new ReactiveEffect(getter, scheduler); + const effect = new ReactiveEffect(getter, NOOP, scheduler); + const scope = getCurrentScope(); + const unwatch = () => { + effect.stop(); + if (scope) { + remove(scope.effects, effect); + } + }; { effect.onTrack = onTrack; effect.onTrigger = onTrigger; @@ -3306,12 +3549,6 @@ If this is a native custom element, make sure to exclude it from component resol } else { effect.run(); } - const unwatch = () => { - effect.stop(); - if (instance && instance.scope) { - remove(instance.scope.effects, effect); - } - }; return unwatch; } function instanceWatch(source, value, options) { @@ -3324,14 +3561,9 @@ If this is a native custom element, make sure to exclude it from component resol cb = value.handler; options = value; } - const cur = currentInstance; - setCurrentInstance(this); + const reset = setCurrentInstance(this); const res = doWatch(getter, cb.bind(publicThis), options); - if (cur) { - setCurrentInstance(cur); - } else { - unsetCurrentInstance(); - } + reset(); return res; } function createPathGetter(ctx, path) { @@ -3344,8 +3576,8 @@ If this is a native custom element, make sure to exclude it from component resol return cur; }; } - function traverse(value, seen) { - if (!isObject(value) || value["__v_skip"]) { + function traverse(value, depth = Infinity, seen) { + if (depth <= 0 || !isObject(value) || value["__v_skip"]) { return value; } seen = seen || /* @__PURE__ */ new Set(); @@ -3353,19 +3585,20 @@ If this is a native custom element, make sure to exclude it from component resol return value; } seen.add(value); + depth--; if (isRef(value)) { - traverse(value.value, seen); + traverse(value.value, depth, seen); } else if (isArray(value)) { for (let i = 0; i < value.length; i++) { - traverse(value[i], seen); + traverse(value[i], depth, seen); } } else if (isSet(value) || isMap(value)) { value.forEach((v) => { - traverse(v, seen); + traverse(v, depth, seen); }); } else if (isPlainObject(value)) { for (const key in value) { - traverse(value[key], seen); + traverse(value[key], depth, seen); } } return value; @@ -3373,16 +3606,15 @@ If this is a native custom element, make sure to exclude it from component resol function validateDirectiveName(name) { if (isBuiltInDirective(name)) { - warn("Do not use built-in directive ids as custom directive id: " + name); + warn$1("Do not use built-in directive ids as custom directive id: " + name); } } function withDirectives(vnode, directives) { - const internalInstance = currentRenderingInstance; - if (internalInstance === null) { - warn(`withDirectives can only be used inside render functions.`); + if (currentRenderingInstance === null) { + warn$1(`withDirectives can only be used inside render functions.`); return vnode; } - const instance = getExposeProxy(internalInstance) || internalInstance.proxy; + const instance = getExposeProxy(currentRenderingInstance) || currentRenderingInstance.proxy; const bindings = vnode.dirs || (vnode.dirs = []); for (let i = 0; i < directives.length; i++) { let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]; @@ -3474,7 +3706,6 @@ If this is a native custom element, make sure to exclude it from component resol setup(props, { slots }) { const instance = getCurrentInstance(); const state = useTransitionState(); - let prevTransitionKey; return () => { const children = slots.default && getTransitionRawChildren(slots.default(), true); if (!children || !children.length) { @@ -3486,7 +3717,7 @@ If this is a native custom element, make sure to exclude it from component resol for (const c of children) { if (c.type !== Comment) { if (hasFound) { - warn( + warn$1( " can only be used on a single element or component. Use for lists." ); break; @@ -3499,7 +3730,7 @@ If this is a native custom element, make sure to exclude it from component resol const rawProps = toRaw(props); const { mode } = rawProps; if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") { - warn(`invalid mode: ${mode}`); + warn$1(`invalid mode: ${mode}`); } if (state.isLeaving) { return emptyPlaceholder(child); @@ -3517,18 +3748,7 @@ If this is a native custom element, make sure to exclude it from component resol setTransitionHooks(innerChild, enterHooks); const oldChild = instance.subTree; const oldInnerChild = oldChild && getKeepAliveChild(oldChild); - let transitionKeyChanged = false; - const { getTransitionKey } = innerChild.type; - if (getTransitionKey) { - const key = getTransitionKey(); - if (prevTransitionKey === void 0) { - prevTransitionKey = key; - } else if (key !== prevTransitionKey) { - prevTransitionKey = key; - transitionKeyChanged = true; - } - } - if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) { + if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild)) { const leavingHooks = resolveTransitionHooks( oldInnerChild, rawProps, @@ -3536,11 +3756,12 @@ If this is a native custom element, make sure to exclude it from component resol instance ); setTransitionHooks(oldInnerChild, leavingHooks); - if (mode === "out-in") { + if (mode === "out-in" && innerChild.type !== Comment) { state.isLeaving = true; leavingHooks.afterLeave = () => { state.isLeaving = false; if (instance.update.active !== false) { + instance.effect.dirty = true; instance.update(); } }; @@ -3720,11 +3941,21 @@ If this is a native custom element, make sure to exclude it from component resol } } function getKeepAliveChild(vnode) { - return isKeepAlive(vnode) ? ( - // #7121 ensure get the child component subtree in case - // it's been replaced during HMR - vnode.component ? vnode.component.subTree : vnode.children ? vnode.children[0] : void 0 - ) : vnode; + if (!isKeepAlive(vnode)) { + return vnode; + } + if (vnode.component) { + return vnode.component.subTree; + } + const { shapeFlag, children } = vnode; + if (children) { + if (shapeFlag & 16) { + return children[0]; + } + if (shapeFlag & 32 && isFunction(children.default)) { + return children.default(); + } + } } function setTransitionHooks(vnode, hooks) { if (vnode.shapeFlag & 6 && vnode.component) { @@ -3813,7 +4044,7 @@ If this is a native custom element, make sure to exclude it from component resol return pendingRequest; } if (!comp) { - warn( + warn$1( `Async component loader resolved to undefined. If you are using retry(), make sure to return its return value.` ); } @@ -3845,7 +4076,6 @@ If this is a native custom element, make sure to exclude it from component resol instance, 13, !errorComponent - /* do not throw in dev if user provided error component */ ); }; if (suspensible && instance.suspense || false) { @@ -3880,6 +4110,7 @@ If this is a native custom element, make sure to exclude it from component resol load().then(() => { loaded.value = true; if (instance.parent && isKeepAlive(instance.parent.vnode)) { + instance.parent.effect.dirty = true; queueJob(instance.parent.update); } }).catch((err) => { @@ -3940,7 +4171,7 @@ If this is a native custom element, make sure to exclude it from component resol } } = sharedContext; const storageContainer = createElement("div"); - sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => { + sharedContext.activate = (vnode, container, anchor, namespace, optimized) => { const instance2 = vnode.component; move(vnode, container, anchor, 0, parentSuspense); patch( @@ -3950,7 +4181,7 @@ If this is a native custom element, make sure to exclude it from component resol anchor, instance2, parentSuspense, - isSVG, + namespace, vnode.slotScopeIds, optimized ); @@ -4046,7 +4277,7 @@ If this is a native custom element, make sure to exclude it from component resol const rawVNode = children[0]; if (children.length > 1) { { - warn(`KeepAlive should contain exactly one component child.`); + warn$1(`KeepAlive should contain exactly one component child.`); } current = null; return children; @@ -4161,9 +4392,9 @@ If this is a native custom element, make sure to exclude it from component resol return; } pauseTracking(); - setCurrentInstance(target); + const reset = setCurrentInstance(target); const res = callWithAsyncErrorHandling(hook, target, type, args); - unsetCurrentInstance(); + reset(); resetTracking(); return res; }); @@ -4174,8 +4405,8 @@ If this is a native custom element, make sure to exclude it from component resol } return wrappedHook; } else { - const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, "")); - warn( + const apiName = toHandlerKey(ErrorTypeStrings$1[type].replace(/ hook$/, "")); + warn$1( `${apiName} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().` + (` If you are using async setup(), make sure to register lifecycle hooks before the first await statement.` ) ); } @@ -4211,7 +4442,7 @@ If this is a native custom element, make sure to exclude it from component resol } } else if (typeof source === "number") { if (!Number.isInteger(source)) { - warn(`The v-for range expect an integer value but got ${source}.`); + warn$1(`The v-for range expect an integer value but got ${source}.`); } ret = new Array(source); for (let i = 0; i < source; i++) { @@ -4267,7 +4498,7 @@ If this is a native custom element, make sure to exclude it from component resol } let slot = slots[name]; if (slot && slot.length > 1) { - warn( + warn$1( `SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.` ); slot = () => []; @@ -4310,7 +4541,7 @@ If this is a native custom element, make sure to exclude it from component resol function toHandlers(obj, preserveCaseIfNecessary) { const ret = {}; if (!isObject(obj)) { - warn(`v-on with no argument expects an object value.`); + warn$1(`v-on with no argument expects an object value.`); return ret; } for (const key in obj) { @@ -4341,7 +4572,10 @@ If this is a native custom element, make sure to exclude it from component resol $root: (i) => getPublicInstance(i.root), $emit: (i) => i.emit, $options: (i) => resolveMergedOptions(i) , - $forceUpdate: (i) => i.f || (i.f = () => queueJob(i.update)), + $forceUpdate: (i) => i.f || (i.f = () => { + i.effect.dirty = true; + queueJob(i.update); + }), $nextTick: (i) => i.n || (i.n = nextTick.bind(i.proxy)), $watch: (i) => instanceWatch.bind(i) }) @@ -4350,6 +4584,9 @@ If this is a native custom element, make sure to exclude it from component resol const hasSetupBinding = (state, key) => state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key); const PublicInstanceProxyHandlers = { get({ _: instance }, key) { + if (key === "__v_skip") { + return true; + } const { ctx, setupState, data, props, accessCache, type, appContext } = instance; if (key === "__isVue") { return true; @@ -4392,7 +4629,7 @@ If this is a native custom element, make sure to exclude it from component resol let cssModule, globalProperties; if (publicGetter) { if (key === "$attrs") { - track(instance, "get", key); + track(instance.attrs, "get", ""); markAttrsAccessed(); } else if (key === "$slots") { track(instance, "get", key); @@ -4417,13 +4654,13 @@ If this is a native custom element, make sure to exclude it from component resol // to infinite warning loop key.indexOf("__v") !== 0)) { if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) { - warn( + warn$1( `Property ${JSON.stringify( key )} must be accessed via $data because it starts with a reserved character ("$" or "_") and is not proxied on the render context.` ); } else if (instance === currentRenderingInstance) { - warn( + warn$1( `Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.` ); } @@ -4435,17 +4672,17 @@ If this is a native custom element, make sure to exclude it from component resol setupState[key] = value; return true; } else if (setupState.__isScriptSetup && hasOwn(setupState, key)) { - warn(`Cannot mutate