fix(compiler): support new constructor in template, fix vuejs#6483

hcg1023 · Aug 17, 2022 · e205151 · e205151
1 parent c1ee6ca
commit e205151
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -36,7 +36,8 @@ import {
   Node,
   Identifier,
   AssignmentExpression,
-  UpdateExpression
+  UpdateExpression,
+  isNewExpression
 } from '@babel/types'
 import { validateBrowserExpression } from '../validateExpression'
 import { parse } from '@babel/parser'
@@ -127,6 +128,8 @@ export function processExpression(
       // ({ x } = y)
       const isDestructureAssignment =
         parent && isInDestructureAssignment(parent, parentStack)
+      // new Class()
+      const isNewAssignment = parent && isNewExpression(parent)
 
       if (
         type === BindingTypes.SETUP_CONST ||
@@ -143,6 +146,8 @@ export function processExpression(
         // that assumes the value to be a ref for more efficiency
         return isAssignmentLVal || isUpdateArg || isDestructureAssignment
           ? `${raw}.value`
+          : isNewAssignment
+          ? `(${context.helperString(UNREF)}(${raw}))`
           : `${context.helperString(UNREF)}(${raw})`
       } else if (type === BindingTypes.SETUP_LET) {
         if (isAssignmentLVal) {

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -963,6 +963,7 @@ import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
         import other from './util'
         import * as tree from './tree'
+        import TestClass from './TestClass'
 
 export default {
   setup(__props) {
@@ -981,7 +982,7 @@ return (_ctx, _cache) => {
       ]),
       _: 1 /* STABLE */
     }),
-    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */),
+    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)) + \\" \\" + _toDisplayString(new (_unref(TestClass))()), 1 /* TEXT */),
     _createTextVNode(\\" \\" + _toDisplayString(tree.foo()), 1 /* TEXT */)
   ], 64 /* STABLE_FRAGMENT */))
 }

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -538,13 +538,14 @@ defineExpose({ foo: 123 })
     })
 
     test('avoid unref() when necessary', () => {
-      // function, const, component import
+      // function, const, class, component import
       const { content } = compile(
         `<script setup>
         import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
         import other from './util'
         import * as tree from './tree'
+        import TestClass from './TestClass'
         const count = ref(0)
         const constant = {}
         const maybe = foo()
@@ -553,7 +554,7 @@ defineExpose({ foo: 123 })
         </script>
         <template>
           <Foo>{{ bar }}</Foo>
-          <div @click="fn">{{ count }} {{ constant }} {{ maybe }} {{ lett }} {{ other }}</div>
+          <div @click="fn">{{ count }} {{ constant }} {{ maybe }} {{ lett }} {{ other }} {{ new TestClass() }}</div>
           {{ tree.foo() }}
         </template>
         `,
@@ -565,6 +566,8 @@ defineExpose({ foo: 123 })
       expect(content).toMatch(`unref(bar)`)
       // should unref other imports
       expect(content).toMatch(`unref(other)`)
+      // #6483 should add an extra set of parentheses after new
+      expect(content).toMatch(`new (_unref(TestClass))()`)
       // no need to unref constant literals
       expect(content).not.toMatch(`unref(constant)`)
       // should directly use .value for known refs