@vue/compat 3.2.27 → 3.2.28

package/README.md

@@ -18,7 +18,7 @@ While we've tried hard to make the migration build mimic Vue 2 behavior as much
 
 - Internet Explorer 11 support: [Vue 3 has officially dropped the plan for IE11 support](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). If you still need to support IE11 or below, you will have to stay on Vue 2.
 
-- Server-side rendering: the migration build can be used for SSR, but migrating a custom SSR setup is much more involved. The general idea is replacing `vue-server-renderer` with [`@vue/server-renderer`](https://github.com/vuejs/vue-next/tree/master/packages/server-renderer). Vue 3 no longer provides a bundle renderer and it is recommended to use Vue 3 SSR with [Vite](https://vitejs.dev/guide/ssr.html). If you are using [Nuxt.js](https://nuxtjs.org/), it is probably better to wait for Nuxt 3.
+- Server-side rendering: the migration build can be used for SSR, but migrating a custom SSR setup is much more involved. The general idea is replacing `vue-server-renderer` with [`@vue/server-renderer`](https://github.com/vuejs/core/tree/main/packages/server-renderer). Vue 3 no longer provides a bundle renderer and it is recommended to use Vue 3 SSR with [Vite](https://vitejs.dev/guide/ssr.html). If you are using [Nuxt.js](https://nuxtjs.org/), it is probably better to wait for Nuxt 3.
 
 ### Expectations
 
@@ -259,7 +259,7 @@ Features that start with `COMPILER_` are compiler-specific: if you are using the
 | ID                                    | Type | Description                                                             | Docs                                                                                           |
 | ------------------------------------- | ---- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
 | GLOBAL_MOUNT_CONTAINER                | ⨂    | Mounted application does not replace the element it's mounted to        | [link](https://v3.vuejs.org/guide/migration/mount-changes.html)                                                    |
-| CONFIG_DEVTOOLS                       | ⨂    | production devtools is now a build-time flag                            | [link](https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags) |
+| CONFIG_DEVTOOLS                       | ⨂    | production devtools is now a build-time flag                            | [link](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) |
 | COMPILER_V_IF_V_FOR_PRECEDENCE        | ⨂    | `v-if` and `v-for` precedence when used on the same element has changed | [link](https://v3.vuejs.org/guide/migration/v-if-v-for.html)                                                       |
 | COMPILER_V_IF_SAME_KEY                | ⨂    | `v-if` branches can no longer have the same key                         | [link](https://v3.vuejs.org/guide/migration/key-attribute.html#on-conditional-branches)                            |
 | COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT | ⨂    | `<template v-for>` key should now be placed on `<template>`             | [link](https://v3.vuejs.org/guide/migration/key-attribute.html#with-template-v-for)                                |

package/dist/vue.cjs.js

@@ -303,8 +303,20 @@ const SVG_TAGS = 'svg,animate,animateMotion,animateTransform,circle,clipPath,col
     'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
     'text,textPath,title,tspan,unknown,use,view';
 const VOID_TAGS = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr';
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `true` flag.
+ */
 const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS);
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `true` flag.
+ */
 const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS);
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `true` flag.
+ */
 const isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS);
 
 const escapeRE = /["'&<>]/;
@@ -688,7 +700,7 @@ class ReactiveEffect {
         if (!this.active) {
             return this.fn();
         }
-        if (!effectStack.includes(this)) {
+        if (!effectStack.length || !effectStack.includes(this)) {
             try {
                 effectStack.push((activeEffect = this));
                 enableTracking();
@@ -944,6 +956,9 @@ function createGetter(isReadonly = false, shallow = false) {
         else if (key === "__v_isReadonly" /* IS_READONLY */) {
             return isReadonly;
         }
+        else if (key === "__v_isShallow" /* IS_SHALLOW */) {
+            return shallow;
+        }
         else if (key === "__v_raw" /* RAW */ &&
             receiver ===
                 (isReadonly
@@ -988,9 +1003,14 @@ const shallowSet = /*#__PURE__*/ createSetter(true);
 function createSetter(shallow = false) {
     return function set(target, key, value, receiver) {
         let oldValue = target[key];
+        if (isReadonly(oldValue) && isRef(oldValue)) {
+            return false;
+        }
         if (!shallow && !isReadonly(value)) {
-            value = toRaw(value);
-            oldValue = toRaw(oldValue);
+            if (!isShallow(value)) {
+                value = toRaw(value);
+                oldValue = toRaw(oldValue);
+            }
             if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
                 oldValue.value = value;
                 return true;
@@ -1377,7 +1397,7 @@ function getTargetType(value) {
 }
 function reactive(target) {
     // if trying to observe a readonly proxy, return the readonly version.
-    if (target && target["__v_isReadonly" /* IS_READONLY */]) {
+    if (isReadonly(target)) {
         return target;
     }
     return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
@@ -1442,6 +1462,9 @@ function isReactive(value) {
 function isReadonly(value) {
     return !!(value && value["__v_isReadonly" /* IS_READONLY */]);
 }
+function isShallow(value) {
+    return !!(value && value["__v_isShallow" /* IS_SHALLOW */]);
+}
 function isProxy(value) {
     return isReactive(value) || isReadonly(value);
 }
@@ -1500,22 +1523,22 @@ function createRef(rawValue, shallow) {
     return new RefImpl(rawValue, shallow);
 }
 class RefImpl {
-    constructor(value, _shallow) {
-        this._shallow = _shallow;
+    constructor(value, __v_isShallow) {
+        this.__v_isShallow = __v_isShallow;
         this.dep = undefined;
         this.__v_isRef = true;
-        this._rawValue = _shallow ? value : toRaw(value);
-        this._value = _shallow ? value : toReactive(value);
+        this._rawValue = __v_isShallow ? value : toRaw(value);
+        this._value = __v_isShallow ? value : toReactive(value);
     }
     get value() {
         trackRefValue(this);
         return this._value;
     }
     set value(newVal) {
-        newVal = this._shallow ? newVal : toRaw(newVal);
+        newVal = this.__v_isShallow ? newVal : toRaw(newVal);
         if (hasChanged(newVal, this._rawValue)) {
             this._rawValue = newVal;
-            this._value = this._shallow ? newVal : toReactive(newVal);
+            this._value = this.__v_isShallow ? newVal : toReactive(newVal);
             triggerRefValue(this, newVal);
         }
     }
@@ -1598,22 +1621,23 @@ class ComputedRefImpl {
     constructor(getter, _setter, isReadonly, isSSR) {
         this._setter = _setter;
         this.dep = undefined;
-        this._dirty = true;
         this.__v_isRef = true;
+        this._dirty = true;
         this.effect = new ReactiveEffect(getter, () => {
             if (!this._dirty) {
                 this._dirty = true;
                 triggerRefValue(this);
             }
         });
-        this.effect.active = !isSSR;
+        this.effect.computed = this;
+        this.effect.active = this._cacheable = !isSSR;
         this["__v_isReadonly" /* IS_READONLY */] = isReadonly;
     }
     get value() {
         // the computed ref may get wrapped by other proxies e.g. readonly() #3376
         const self = toRaw(this);
         trackRefValue(self);
-        if (self._dirty) {
+        if (self._dirty || !self._cacheable) {
             self._dirty = false;
             self._value = self.effect.run();
         }
@@ -1790,7 +1814,7 @@ const ErrorTypeStrings = {
     [12 /* FUNCTION_REF */]: 'ref function',
     [13 /* ASYNC_COMPONENT_LOADER */]: 'async component loader',
     [14 /* SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +
-        'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next'
+        'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core'
 };
 function callWithErrorHandling(fn, instance, type, args) {
     let res;
@@ -2338,7 +2362,7 @@ const deprecationData = {
     ["CONFIG_DEVTOOLS" /* CONFIG_DEVTOOLS */]: {
         message: `config.devtools has been removed. To enable devtools for ` +
             `production, configure the __VUE_PROD_DEVTOOLS__ compile-time flag.`,
-        link: `https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags`
+        link: `https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags`
     },
     ["CONFIG_KEY_CODES" /* CONFIG_KEY_CODES */]: {
         message: `config.keyCodes has been removed. ` +
@@ -2525,7 +2549,7 @@ const deprecationData = {
                 (isArray(comp.props)
                     ? comp.props.includes('modelValue')
                     : hasOwn(comp.props, 'modelValue'))) {
-                return (`Component delcares "modelValue" prop, which is Vue 3 usage, but ` +
+                return (`Component declares "modelValue" prop, which is Vue 3 usage, but ` +
                     `is running under Vue 2 compat v-model behavior. You can ${configMsg}`);
             }
             return (`v-model usage on component has changed in Vue 3. Component that expects ` +
@@ -2755,6 +2779,7 @@ const compatModelEventPrefix = `onModelCompat:`;
 const warnedTypes = new WeakSet();
 function convertLegacyVModelProps(vnode) {
     const { type, shapeFlag, props, dynamicProps } = vnode;
+    const comp = type;
     if (shapeFlag & 6 /* COMPONENT */ && props && 'modelValue' in props) {
         if (!isCompatEnabled("COMPONENT_V_MODEL" /* COMPONENT_V_MODEL */, 
         // this is a special case where we want to use the vnode component's
@@ -2763,16 +2788,18 @@ function convertLegacyVModelProps(vnode) {
         { type })) {
             return;
         }
-        if (!warnedTypes.has(type)) {
+        if (!warnedTypes.has(comp)) {
             pushWarningContext(vnode);
-            warnDeprecation("COMPONENT_V_MODEL" /* COMPONENT_V_MODEL */, { type }, type);
+            warnDeprecation("COMPONENT_V_MODEL" /* COMPONENT_V_MODEL */, { type }, comp);
             popWarningContext();
-            warnedTypes.add(type);
+            warnedTypes.add(comp);
         }
         // v3 compiled model code -> v2 compat props
         // modelValue -> value
         // onUpdate:modelValue -> onModelCompat:input
-        const { prop = 'value', event = 'input' } = type.model || {};
+        const model = comp.model || {};
+        applyModelFromMixins(model, comp.mixins);
+        const { prop = 'value', event = 'input' } = model;
         if (prop !== 'modelValue') {
             props[prop] = props.modelValue;
             delete props.modelValue;
@@ -2785,6 +2812,16 @@ function convertLegacyVModelProps(vnode) {
         delete props['onUpdate:modelValue'];
     }
 }
+function applyModelFromMixins(model, mixins) {
+    if (mixins) {
+        mixins.forEach(m => {
+            if (m.model)
+                extend(model, m.model);
+            if (m.mixins)
+                applyModelFromMixins(model, m.mixins);
+        });
+    }
+}
 function compatModelEmit(instance, event, args) {
     if (!isCompatEnabled("COMPONENT_V_MODEL" /* COMPONENT_V_MODEL */, instance)) {
         return;
@@ -3787,7 +3824,7 @@ function inject(key, defaultValue, treatDefaultAsFactory = false) {
     if (instance) {
         // #2400
         // to support `app.use` plugins,
-        // fallback to appContext's `provides` if the intance is at root
+        // fallback to appContext's `provides` if the instance is at root
         const provides = instance.parent == null
             ? instance.vnode.appContext && instance.vnode.appContext.provides
             : instance.parent.provides;
@@ -3853,7 +3890,7 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
     let isMultiSource = false;
     if (isRef(source)) {
         getter = () => source.value;
-        forceTrigger = !!source._shallow;
+        forceTrigger = isShallow(source);
     }
     else if (isReactive(source)) {
         getter = () => source;
@@ -4764,7 +4801,7 @@ function matches(pattern, name) {
         return pattern.some((p) => matches(p, name));
     }
     else if (isString(pattern)) {
-        return pattern.split(',').indexOf(name) > -1;
+        return pattern.split(',').includes(name);
     }
     else if (pattern.test) {
         return pattern.test(name);
@@ -5032,7 +5069,7 @@ function applyOptions(instance) {
                         warn$1(`Write operation failed: computed property "${key}" is readonly.`);
                     }
                     ;
-            const c = computed({
+            const c = computed$1({
                 get,
                 set
             });
@@ -5513,7 +5550,9 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
         // attrs point to the same object so it should already have been updated.
         if (attrs !== rawCurrentProps) {
             for (const key in attrs) {
-                if (!rawProps || !hasOwn(rawProps, key)) {
+                if (!rawProps ||
+                    (!hasOwn(rawProps, key) &&
+                        (!hasOwn(rawProps, key + 'Native')))) {
                     delete attrs[key];
                     hasAttrsChanged = true;
                 }
@@ -6151,7 +6190,7 @@ function createCompatVue(createApp, createSingletonApp) {
             return vm;
         }
     }
-    Vue.version = "3.2.27";
+    Vue.version = `2.6.14-compat:${"3.2.28"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
         if (p && isFunction(p.install)) {
@@ -7140,6 +7179,7 @@ function createHydrationFunctions(rendererInternals) {
     return [hydrate, hydrateNode];
 }
 
+/* eslint-disable no-restricted-globals */
 let supported;
 let perf;
 function startMeasure(instance, type) {
@@ -7167,7 +7207,6 @@ function isSupported() {
     if (supported !== undefined) {
         return supported;
     }
-    /* eslint-disable no-restricted-globals */
     if (typeof window !== 'undefined' && window.performance) {
         supported = true;
         perf = window.performance;
@@ -7175,7 +7214,6 @@ function isSupported() {
     else {
         supported = false;
     }
-    /* eslint-enable no-restricted-globals */
     return supported;
 }
 
@@ -9421,7 +9459,7 @@ function cloneVNode(vnode, extraProps, mergeRef = false) {
         shapeFlag: vnode.shapeFlag,
         // if the vnode is cloned with extra props, we can no longer assume its
         // existing patch flag to be reliable and need to add the FULL_PROPS flag.
-        // note: perserve flag for fragments since they use the flag for children
+        // note: preserve flag for fragments since they use the flag for children
         // fast paths only.
         patchFlag: extraProps && vnode.type !== Fragment
             ? patchFlag === -1 // hoisted node
@@ -9586,7 +9624,8 @@ function mergeProps(...args) {
             else if (isOn(key)) {
                 const existing = ret[key];
                 const incoming = toMerge[key];
-                if (existing !== incoming &&
+                if (incoming &&
+                    existing !== incoming &&
                     !(isArray(existing) && existing.includes(incoming))) {
                     ret[key] = existing
                         ? [].concat(existing, incoming)
@@ -9862,7 +9901,7 @@ function legacyCheckKeyCodes(instance, eventKeyCode, key, builtInKeyCode, eventK
 }
 function isKeyNotMatch(expect, actual) {
     if (isArray(expect)) {
-        return expect.indexOf(actual) === -1;
+        return !expect.includes(actual);
     }
     else {
         return expect !== actual;
@@ -9941,7 +9980,7 @@ function installCompatInstanceProperties(map) {
         extend(map, {
             // needed by many libs / render fns
             $vnode: i => i.vnode,
-            // inject addtional properties into $options for compat
+            // inject additional properties into $options for compat
             // e.g. vuex needs this.$options.parent
             $options: i => {
                 const res = extend({}, resolveMergedOptions(i));
@@ -10673,7 +10712,7 @@ function defineEmits() {
  * instance properties when it is accessed by a parent component via template
  * refs.
  *
- * `<script setup>` components are closed by default - i.e. varaibles inside
+ * `<script setup>` components are closed by default - i.e. variables inside
  * the `<script setup>` scope is not exposed to parent unless explicitly exposed
  * via `defineExpose`.
  *
@@ -10876,7 +10915,7 @@ function initCustomFormatter() {
                 return [
                     'div',
                     {},
-                    ['span', vueStyle, 'Reactive'],
+                    ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
                     '<',
                     formatValue(obj),
                     `>${isReadonly(obj) ? ` (readonly)` : ``}`
@@ -10886,7 +10925,7 @@ function initCustomFormatter() {
                 return [
                     'div',
                     {},
-                    ['span', vueStyle, 'Readonly'],
+                    ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
                     '<',
                     formatValue(obj),
                     '>'
@@ -11015,7 +11054,7 @@ function initCustomFormatter() {
         }
     }
     function genRefFlag(v) {
-        if (v._shallow) {
+        if (isShallow(v)) {
             return `ShallowRef`;
         }
         if (v.effect) {
@@ -11059,7 +11098,7 @@ function isMemoSame(cached, memo) {
 }
 
 // Core API ------------------------------------------------------------------
-const version = "3.2.27";
+const version = "3.2.28";
 const _ssrUtils = {
     createComponentInstance,
     setupComponent,
@@ -11498,7 +11537,7 @@ function patchStopImmediatePropagation(e, value) {
             originalStop.call(e);
             e._stopped = true;
         };
-        return value.map(fn => (e) => !e._stopped && fn(e));
+        return value.map(fn => (e) => !e._stopped && fn && fn(e));
     }
     else {
         return value;
@@ -12864,6 +12903,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   isProxy: isProxy,
   isReactive: isReactive,
   isReadonly: isReadonly,
+  isShallow: isShallow,
   customRef: customRef,
   triggerRef: triggerRef,
   shallowRef: shallowRef,
@@ -14179,7 +14219,7 @@ function parseAttributes(context, type) {
         }
         const attr = parseAttribute(context, attributeNames);
         // Trim whitespace between class
-        // https://github.com/vuejs/vue-next/issues/4251
+        // https://github.com/vuejs/core/issues/4251
         if (attr.type === 6 /* ATTRIBUTE */ &&
             attr.value &&
             attr.name === 'class') {
@@ -14415,7 +14455,7 @@ function parseTextData(context, length, mode) {
     advanceBy(context, length);
     if (mode === 2 /* RAWTEXT */ ||
         mode === 3 /* CDATA */ ||
-        rawText.indexOf('&') === -1) {
+        !rawText.includes('&')) {
         return rawText;
     }
     else {
@@ -16157,7 +16197,7 @@ function isReferenced(node, parent, grandparent) {
         // no: NODE.target
         case 'MetaProperty':
             return false;
-        // yes: type X = { somePropert: NODE }
+        // yes: type X = { someProperty: NODE }
         // no: type X = { NODE: OtherType }
         case 'ObjectTypeProperty':
             return parent.key !== node;
@@ -16668,6 +16708,7 @@ const transformFor = createStructuralDirectiveTransform('for', (node, dir, conte
         const renderExp = createCallExpression(helper(RENDER_LIST), [
             forNode.source
         ]);
+        const isTemplate = isTemplateNode(node);
         const memo = findDir(node, 'memo');
         const keyProp = findProp(node, `key`);
         const keyExp = keyProp &&
@@ -16675,15 +16716,17 @@ const transformFor = createStructuralDirectiveTransform('for', (node, dir, conte
                 ? createSimpleExpression(keyProp.value.content, true)
                 : keyProp.exp);
         const keyProperty = keyProp ? createObjectProperty(`key`, keyExp) : null;
-        if (context.prefixIdentifiers &&
-            keyProperty &&
-            keyProp.type !== 6 /* ATTRIBUTE */) {
-            // #2085 process :key expression needs to be processed in order for it
-            // to behave consistently for <template v-for> and <div v-for>.
-            // In the case of `<template v-for>`, the node is discarded and never
-            // traversed so its key expression won't be processed by the normal
-            // transforms.
-            keyProperty.value = processExpression(keyProperty.value, context);
+        if (isTemplate) {
+            // #2085 / #5288 process :key and v-memo expressions need to be
+            // processed on `<template v-for>`. In this case the node is discarded
+            // and never traversed so its binding expressions won't be processed
+            // by the normal transforms.
+            if (memo) {
+                memo.exp = processExpression(memo.exp, context);
+            }
+            if (keyProperty && keyProp.type !== 6 /* ATTRIBUTE */) {
+                keyProperty.value = processExpression(keyProperty.value, context);
+            }
         }
         const isStableFragment = forNode.source.type === 4 /* SIMPLE_EXPRESSION */ &&
             forNode.source.constType > 0 /* NOT_CONSTANT */;
@@ -16697,7 +16740,6 @@ const transformFor = createStructuralDirectiveTransform('for', (node, dir, conte
         return () => {
             // finish the codegen now that all children have been traversed
             let childBlock;
-            const isTemplate = isTemplateNode(node);
             const { children } = forNode;
             // check <template v-for> key placement
             if (isTemplate) {