vue 2.7.0 → 2.7.1

package/packages/compiler-sfc/dist/compiler-sfc.js

@@ -329,7 +329,7 @@ function hasChanged(x, y) {
         return x === 0 && 1 / x !== 1 / y;
     }
     else {
-        return x === x && y === y;
+        return x === x || y === y;
     }
 }
 
@@ -5319,7 +5319,7 @@ function defineReactive(obj, key, val, customSetter, shallow) {
                     }
                 }
             }
-            return isRef(value) ? value.value : value;
+            return isRef(value) && !shallow ? value.value : value;
         },
         set: function reactiveSetter(newVal) {
             const value = getter ? getter.call(obj) : val;
@@ -8360,18 +8360,14 @@ function compileScript(sfc, options = { id: '' }) {
     function error(msg, node, end = node.end + startOffset) {
         throw new Error(`[@vue/compiler-sfc] ${msg}\n\n${filename}\n${generateCodeFrame(source, node.start + startOffset, end)}`);
     }
-    function registerUserImport(source, local, imported, isType, isFromSetup, needTemplateUsageCheck) {
+    function registerUserImport(source, local, imported, isType, isFromSetup) {
         if (source === 'vue' && imported) {
             userImportAlias[imported] = local;
         }
         // template usage check is only needed in non-inline mode, so we can skip
         // the work if inlineTemplate is true.
-        let isUsedInTemplate = needTemplateUsageCheck;
-        if (needTemplateUsageCheck &&
-            isTS &&
-            sfc.template &&
-            !sfc.template.src &&
-            !sfc.template.lang) {
+        let isUsedInTemplate = true;
+        if (isTS && sfc.template && !sfc.template.src && !sfc.template.lang) {
             isUsedInTemplate = isImportUsed(local, sfc);
         }
         userImports[local] = {
@@ -8622,7 +8618,7 @@ function compileScript(sfc, options = { id: '' }) {
                         specifier.imported.name;
                     registerUserImport(node.source.value, specifier.local.name, imported, node.importKind === 'type' ||
                         (specifier.type === 'ImportSpecifier' &&
-                            specifier.importKind === 'type'), false, true);
+                            specifier.importKind === 'type'), false);
                 }
             }
             else if (node.type === 'ExportDefaultDeclaration') {
@@ -8791,7 +8787,7 @@ function compileScript(sfc, options = { id: '' }) {
                 else {
                     registerUserImport(source, local, imported, node.importKind === 'type' ||
                         (specifier.type === 'ImportSpecifier' &&
-                            specifier.importKind === 'type'), true, true);
+                            specifier.importKind === 'type'), true);
                 }
             }
             if (node.specifiers.length && removed === node.specifiers.length) {
@@ -9526,7 +9522,11 @@ function resolveTemplateUsageCheckString(sfc) {
             for (let i = 0; i < attrs.length; i++) {
                 const { name, value } = attrs[i];
                 if (dirRE.test(name)) {
-                    const baseName = name.replace(dirRE, '');
+                    const baseName = onRE.test(name)
+                        ? 'on'
+                        : bindRE.test(name)
+                            ? 'bind'
+                            : name.replace(dirRE, '');
                     if (!isBuiltInDir$1(baseName)) {
                         code += `,v${capitalize(camelize(baseName))}`;
                     }
@@ -9552,6 +9552,9 @@ function processExp(exp, dir) {
         if (dir === 'slot') {
             exp = `(${exp})=>{}`;
         }
+        else if (dir === 'on') {
+            exp = `()=>{${exp}}`;
+        }
         else if (dir === 'for') {
             const inMatch = exp.match(forAliasRE);
             if (inMatch) {
@@ -9807,7 +9810,7 @@ function transform(node, transformAssetUrlsOptions) {
                     return;
                 }
                 const imageCandidates = value
-                    .substr(1, value.length - 2)
+                    .slice(1, -1)
                     .split(',')
                     .map(s => {
                     // The attribute value arrives here with all whitespace, except

package/packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",

package/packages/compiler-sfc/src/compileScript.ts

@@ -39,7 +39,7 @@ import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { warnOnce } from './warn'
 import { isReservedTag } from 'web/util'
-import { dirRE } from 'compiler/parser'
+import { bindRE, dirRE, onRE } from 'compiler/parser'
 import { parseText } from 'compiler/parser/text-parser'
 import { DEFAULT_FILENAME } from './parseComponent'
 import {
@@ -278,8 +278,7 @@ export function compileScript(
     local: string,
     imported: string | false,
     isType: boolean,
-    isFromSetup: boolean,
-    needTemplateUsageCheck: boolean
+    isFromSetup: boolean
   ) {
     if (source === 'vue' && imported) {
       userImportAlias[imported] = local
@@ -287,14 +286,8 @@ export function compileScript(
 
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
-    let isUsedInTemplate = needTemplateUsageCheck
-    if (
-      needTemplateUsageCheck &&
-      isTS &&
-      sfc.template &&
-      !sfc.template.src &&
-      !sfc.template.lang
-    ) {
+    let isUsedInTemplate = true
+    if (isTS && sfc.template && !sfc.template.src && !sfc.template.lang) {
       isUsedInTemplate = isImportUsed(local, sfc)
     }
 
@@ -658,8 +651,7 @@ export function compileScript(
             node.importKind === 'type' ||
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
-            false,
-            true
+            false
           )
         }
       } else if (node.type === 'ExportDefaultDeclaration') {
@@ -872,7 +864,6 @@ export function compileScript(
             node.importKind === 'type' ||
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
-            true,
             true
           )
         }
@@ -1809,7 +1800,11 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
       for (let i = 0; i < attrs.length; i++) {
         const { name, value } = attrs[i]
         if (dirRE.test(name)) {
-          const baseName = name.replace(dirRE, '')
+          const baseName = onRE.test(name)
+            ? 'on'
+            : bindRE.test(name)
+            ? 'bind'
+            : name.replace(dirRE, '')
           if (!isBuiltInDir(baseName)) {
             code += `,v${capitalize(camelize(baseName))}`
           }
@@ -1838,6 +1833,8 @@ function processExp(exp: string, dir?: string): string {
   if (/ as\s+\w|<.*>|:/.test(exp)) {
     if (dir === 'slot') {
       exp = `(${exp})=>{}`
+    } else if (dir === 'on') {
+      exp = `()=>{${exp}}`
     } else if (dir === 'for') {
       const inMatch = exp.match(forAliasRE)
       if (inMatch) {

package/packages/compiler-sfc/src/templateCompilerModules/srcset.ts

@@ -38,7 +38,7 @@ function transform(
         }
 
         const imageCandidates: ImageCandidate[] = value
-          .substr(1, value.length - 2)
+          .slice(1, -1)
           .split(',')
           .map(s => {
             // The attribute value arrives here with all whitespace, except

package/packages/compiler-sfc/test/compileScript.spec.ts

@@ -1562,5 +1562,17 @@ describe('SFC analyze <script> bindings', () => {
       expect(content).toMatch(`name: 'Baz'`)
       assertCode(content)
     })
+
+    // #12591
+    test('should not error when performing ts expression check for v-on inline statement', () => {
+      compile(`
+      <script setup lang="ts">
+        import { foo } from './foo'
+      </script>
+      <template>
+        <div @click="$emit('update:a');"></div>
+      </tempalte>
+      `)
+    })
   })
 })

package/src/core/observer/index.ts

@@ -181,7 +181,7 @@ export function defineReactive(
           }
         }
       }
-      return isRef(value) ? value.value : value
+      return isRef(value) && !shallow ? value.value : value
     },
     set: function reactiveSetter(newVal) {
       const value = getter ? getter.call(obj) : val

package/src/shared/util.ts

@@ -361,6 +361,6 @@ export function hasChanged(x: unknown, y: unknown): boolean {
   if (x === y) {
     return x === 0 && 1 / x !== 1 / (y as number)
   } else {
-    return x === x && y === y
+    return x === x || y === y
   }
 }

package/src/v3/apiSetup.ts

@@ -12,7 +12,7 @@ import {
 } from '../shared/util'
 import { currentInstance, setCurrentInstance } from './currentInstance'
 import { shallowReactive } from './reactivity/reactive'
-import { isRef } from './reactivity/ref'
+import { proxyWithRefUnwrap } from './reactivity/ref'
 
 /**
  * @internal
@@ -68,7 +68,9 @@ export function initSetup(vm: Component) {
         // exposed for compiled render fn
         const proxy = (vm._setupProxy = {})
         for (const key in setupResult) {
-          proxyWithRefUnwrap(proxy, setupResult, key)
+          if (key !== '__sfc') {
+            proxyWithRefUnwrap(proxy, setupResult, key)
+          }
         }
       }
     } else if (__DEV__ && setupResult !== undefined) {
@@ -81,25 +83,6 @@ export function initSetup(vm: Component) {
   }
 }
 
-export function proxyWithRefUnwrap(
-  target: any,
-  source: Record<string, any>,
-  key: string
-) {
-  Object.defineProperty(target, key, {
-    enumerable: true,
-    configurable: true,
-    get: () => {
-      const raw = source[key]
-      return isRef(raw) ? raw.value : raw
-    },
-    set: newVal => {
-      const raw = source[key]
-      isRef(raw) ? (raw.value = newVal) : (source[key] = newVal)
-    }
-  })
-}
-
 function createSetupContext(vm: Component): SetupContext {
   let exposeCalled = false
   return {

package/src/v3/apiWatch.ts

@@ -221,7 +221,7 @@ function doWatch(
   } else if (isFunction(source)) {
     if (cb) {
       // getter with cb
-      getter = () => call(source as Function, WATCHER_GETTER)
+      getter = () => call(source, WATCHER_GETTER)
     } else {
       // no cb -> simple effect
       getter = () => {
@@ -231,7 +231,7 @@ function doWatch(
         if (cleanup) {
           cleanup()
         }
-        return call(source as Function, WATCHER, [onCleanup])
+        return call(source, WATCHER, [onCleanup])
       }
     }
   } else {

package/src/v3/index.ts

@@ -7,6 +7,7 @@ export {
   toRef,
   toRefs,
   unref,
+  proxyRefs,
   customRef,
   triggerRef,
   Ref,

package/src/v3/reactivity/ref.ts

@@ -93,6 +93,40 @@ export function unref<T>(ref: T | Ref<T>): T {
   return isRef(ref) ? (ref.value as any) : ref
 }
 
+export function proxyRefs<T extends object>(
+  objectWithRefs: T
+): ShallowUnwrapRef<T> {
+  if (isReactive(objectWithRefs)) {
+    return objectWithRefs as any
+  }
+  const proxy = {}
+  const keys = Object.keys(objectWithRefs)
+  for (let i = 0; i < keys.length; i++) {
+    proxyWithRefUnwrap(proxy, objectWithRefs, keys[i])
+  }
+  return proxy as any
+}
+
+export function proxyWithRefUnwrap(
+  target: any,
+  source: Record<string, any>,
+  key: string
+) {
+  Object.defineProperty(target, key, {
+    enumerable: true,
+    configurable: true,
+    get: () => unref(source[key]),
+    set: value => {
+      const oldValue = source[key]
+      if (isRef(oldValue) && !isRef(value)) {
+        oldValue.value = value
+      } else {
+        source[key] = value
+      }
+    }
+  })
+}
+
 export type CustomRefFactory<T> = (
   track: () => void,
   trigger: () => void

package/types/v3-generated.d.ts

@@ -174,6 +174,8 @@ declare type PropOptions = {
 
 export declare function provide<T>(key: InjectionKey<T> | string | number, value: T): void;
 
+export declare function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;
+
 declare const RawSymbol: unique symbol;
 
 export declare function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;