feat(compiler-sfc): support reactive let bindings in <script setup>

Author: yyx990803

packages/compiler-core/src/transforms/transformExpression.ts

@@ -161,9 +161,9 @@ export function processExpression(
         if (!isDuplicate(node)) {
           const needPrefix = shouldPrefix(node, parent)
           if (!knownIds[node.name] && needPrefix) {
-            if (isPropertyShorthand(node, parent)) {
-              // property shorthand like { foo }, we need to add the key since we
-              // rewrite the value
+            if (isStaticProperty(parent) && parent.shorthand) {
+              // property shorthand like { foo }, we need to add the key since
+              // we rewrite the value
               node.prefix = `${node.name}: `
             }
             node.name = prefix(node.name)
@@ -278,46 +278,65 @@ const isStaticProperty = (node: Node): node is ObjectProperty =>
   (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
   !node.computed
 
-const isPropertyShorthand = (node: Node, parent: Node) => {
-  return (
-    isStaticProperty(parent) &&
-    parent.value === node &&
-    parent.key.type === 'Identifier' &&
-    parent.key.name === (node as Identifier).name &&
-    parent.key.start === node.start
-  )
-}
-
 const isStaticPropertyKey = (node: Node, parent: Node) =>
   isStaticProperty(parent) && parent.key === node
 
-function shouldPrefix(identifier: Identifier, parent: Node) {
+function shouldPrefix(id: Identifier, parent: Node) {
+  // declaration id
   if (
-    !(
-      isFunction(parent) &&
-      // not id of a FunctionDeclaration
-      ((parent as any).id === identifier ||
-        // not a params of a function
-        parent.params.includes(identifier))
-    ) &&
-    // not a key of Property
-    !isStaticPropertyKey(identifier, parent) &&
-    // not a property of a MemberExpression
-    !(
-      (parent.type === 'MemberExpression' ||
-        parent.type === 'OptionalMemberExpression') &&
-      parent.property === identifier &&
-      !parent.computed
-    ) &&
-    // not in an Array destructure pattern
-    !(parent.type === 'ArrayPattern') &&
-    // skip whitelisted globals
-    !isGloballyWhitelisted(identifier.name) &&
-    // special case for webpack compilation
-    identifier.name !== `require` &&
-    // is a special keyword but parsed as identifier
-    identifier.name !== `arguments`
+    (parent.type === 'VariableDeclarator' ||
+      parent.type === 'ClassDeclaration') &&
+    parent.id === id
   ) {
-    return true
+    return false
+  }
+
+  if (isFunction(parent)) {
+    // function decalration/expression id
+    if ((parent as any).id === id) {
+      return false
+    }
+    // params list
+    if (parent.params.includes(id)) {
+      return false
+    }
   }
+
+  // property key
+  // this also covers object destructure pattern
+  if (isStaticPropertyKey(id, parent)) {
+    return false
+  }
+
+  // array destructure pattern
+  if (parent.type === 'ArrayPattern') {
+    return false
+  }
+
+  // member expression property
+  if (
+    (parent.type === 'MemberExpression' ||
+      parent.type === 'OptionalMemberExpression') &&
+    parent.property === id &&
+    !parent.computed
+  ) {
+    return false
+  }
+
+  // is a special keyword but parsed as identifier
+  if (id.name === 'arguments') {
+    return false
+  }
+
+  // skip whitelisted globals
+  if (isGloballyWhitelisted(id.name)) {
+    return false
+  }
+
+  // special case for webpack compilation
+  if (id.name === 'require') {
+    return false
+  }
+
+  return true
 }

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SFC compile <script setup> <script setup lang="ts"> extract emits 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
+"import { Slots as __Slots__, defineComponent as __defineComponent__ } from 'vue'
 declare function __emit__(e: 'foo' | 'bar'): void
       declare function __emit__(e: 'baz', id: number): void
       
@@ -16,15 +15,14 @@ export function setup(_: {}, { emit: myEmit }: {
 return {  }
 }
 
-export default __define__({
+export default __defineComponent__({
   emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
   setup
 })"
 `;
 
 exports[`SFC compile <script setup> <script setup lang="ts"> extract props 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
+"import { Slots as __Slots__, defineComponent as __defineComponent__ } from 'vue'
 interface Test {}
 
       type Alias = number[]
@@ -59,7 +57,7 @@ export function setup(myProps: {
 return {  }
 }
 
-export default __define__({
+export default __defineComponent__({
   props: {
     string: { type: String, required: true },
     number: { type: Number, required: true },
@@ -88,8 +86,7 @@ export default __define__({
 `;
 
 exports[`SFC compile <script setup> <script setup lang="ts"> hoist type declarations 1`] = `
-"import { defineComponent as __define__ } from 'vue'
-import { Slots as __Slots__ } from 'vue'
+"import { Slots as __Slots__, defineComponent as __defineComponent__ } from 'vue'
 export interface Foo {}
         type Bar = {}
         
@@ -100,7 +97,7 @@ export function setup() {
 return { a }
 }
 
-export default __define__({
+export default __defineComponent__({
   setup
 })"
 `;
@@ -379,6 +376,93 @@ return {  }
 export default { setup }"
 `;
 
+exports[`SFC compile <script setup> reactive let bindings accessing let binding 1`] = `
+"import { ref as __ref__ } from 'vue'
+
+export function setup() {
+
+      let a = __ref__(1)
+      console.log(a.value)
+      function get() {
+        return a.value + 1
+      }
+      
+return {  }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> reactive let bindings convert let values 1`] = `
+"import { ref as __ref__ } from 'vue'
+
+export function setup() {
+
+      let a = __ref__(1)
+      let b = __ref__({
+        count: 0
+      })
+      let c = __ref__(() => {})
+      let d = __ref__()
+      
+return { a }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> reactive let bindings multi let declarations 1`] = `
+"import { ref as __ref__ } from 'vue'
+
+export function setup() {
+
+      let a = __ref__(1), b = __ref__(2), c = __ref__({
+        count: 0
+      })
+      
+return { a, b, c }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> reactive let bindings mutating let binding 1`] = `
+"import { ref as __ref__ } from 'vue'
+
+export function setup() {
+
+      let a = __ref__(1)
+      let b = __ref__({ count: 0 })
+      function inc() {
+        a.value++
+        a.value = a.value + 1
+        b.value.count++
+        b.value.count = b.value.count + 1
+      }
+      
+return {  }
+}
+
+export default { setup }"
+`;
+
+exports[`SFC compile <script setup> reactive let bindings using let binding in property shorthand 1`] = `
+"import { ref as __ref__ } from 'vue'
+
+export function setup() {
+
+      let a = __ref__(1)
+      const b = { a: a.value }
+      function test() {
+        const { a } = b
+      }
+      
+return {  }
+}
+
+export default { setup }"
+`;
+
 exports[`SFC compile <script setup> should hoist imports 1`] = `
 "import { ref } from 'vue'
 export function setup() {

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -370,6 +370,109 @@ describe('SFC compile <script setup>', () => {
     })
   })
 
+  describe('reactive let bindings', () => {
+    test('convert let values', () => {
+      const { content } = compile(`<script setup>
+      export let a = 1
+      let b = {
+        count: 0
+      }
+      let c = () => {}
+      let d
+      </script>`)
+      expect(content).toMatch(`import { ref as __ref__ } from 'vue'`)
+      expect(content).not.toMatch(`export let a`)
+      expect(content).toMatch(`let a = __ref__(1)`)
+      expect(content).toMatch(`
+      let b = __ref__({
+        count: 0
+      })
+      `)
+      expect(content).toMatch(`let c = __ref__(() => {})`)
+      expect(content).toMatch(`let d = __ref__()`)
+      assertCode(content)
+    })
+
+    test('multi let declarations', () => {
+      const { content } = compile(`<script setup>
+      export let a = 1, b = 2, c = {
+        count: 0
+      }
+      </script>`)
+      expect(content).toMatch(`
+      let a = __ref__(1), b = __ref__(2), c = __ref__({
+        count: 0
+      })
+      `)
+      assertCode(content)
+    })
+
+    test('should not convert const values', () => {
+      const { content } = compile(`<script setup>
+      export const a = 1
+      const b = 2
+      </script>`)
+      expect(content).toMatch(`const a = 1`)
+      expect(content).toMatch(`b = 2`)
+    })
+
+    test('accessing let binding', () => {
+      const { content } = compile(`<script setup>
+      let a = 1
+      console.log(a)
+      function get() {
+        return a + 1
+      }
+      </script>`)
+      expect(content).toMatch(`console.log(a.value)`)
+      expect(content).toMatch(`return a.value + 1`)
+      assertCode(content)
+    })
+
+    test('cases that should not append .value', () => {
+      const { content } = compile(`<script setup>
+      let a = 1
+      console.log(b.a)
+      function get(a) {
+        return a + 1
+      }
+      </script>`)
+      expect(content).not.toMatch(`a.value`)
+    })
+
+    test('mutating let binding', () => {
+      const { content } = compile(`<script setup>
+      let a = 1
+      let b = { count: 0 }
+      function inc() {
+        a++
+        a = a + 1
+        b.count++
+        b.count = b.count + 1
+      }
+      </script>`)
+      expect(content).toMatch(`a.value++`)
+      expect(content).toMatch(`a.value = a.value + 1`)
+      expect(content).toMatch(`b.value.count++`)
+      expect(content).toMatch(`b.value.count = b.value.count + 1`)
+      assertCode(content)
+    })
+
+    test('using let binding in property shorthand', () => {
+      const { content } = compile(`<script setup>
+      let a = 1
+      const b = { a }
+      function test() {
+        const { a } = b
+      }
+      </script>`)
+      expect(content).toMatch(`const b = { a: a.value }`)
+      // should not convert destructure
+      expect(content).toMatch(`const { a } = b`)
+      assertCode(content)
+    })
+  })
+
   describe('errors', () => {
     test('<script> and <script setup> must have same lang', () => {
       expect(() =>