From 4768f26f591551b222aa9a2cc73791f8bff9f5f7 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 21 Jan 2022 08:47:48 +0800
Subject: [PATCH] fix(compiler-sfc/reactivity-transform): fix edge case where
 normal script has ref macros but script setup does not

---
 .../compileScriptRefTransform.spec.ts.snap    | 17 +++++++++++
 .../compileScriptRefTransform.spec.ts         | 13 +++++++++
 packages/compiler-sfc/src/compileScript.ts    | 29 ++++++++++---------
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
index 43b47e950f2..b7c81a08c86 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
@@ -71,6 +71,23 @@ exports[`sfc ref transform usage in normal <script> 1`] = `
     "
 `;
 
+exports[`sfc ref transform usage with normal <script> (has macro usage) + <script setup> (no macro usage) 1`] = `
+"import { ref as _ref } from 'vue'
+
+    let data = _ref()
+    
+export default {
+  setup(__props, { expose }) {
+  expose();
+
+    console.log(data.value)
+    
+return { data }
+}
+
+}"
+`;
+
 exports[`sfc ref transform usage with normal <script> + <script setup> 1`] = `
 "import { ref as _ref } from 'vue'
 
diff --git a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
index 15e633c6e0a..88d62f2b478 100644
--- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
@@ -146,6 +146,19 @@ describe('sfc ref transform', () => {
     })
   })
 
+  test('usage with normal <script> (has macro usage) + <script setup> (no macro usage)', () => {
+    const { content } = compileWithReactivityTransform(`
+    <script>
+    let data = $ref()
+    </script>
+    <script setup>
+    console.log(data)
+    </script>
+    `)
+    expect(content).toMatch(`console.log(data.value)`)
+    assertCode(content)
+  })
+
   describe('errors', () => {
     test('defineProps/Emit() referencing ref declarations', () => {
       expect(() =>
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 79ac5207ed7..05623326ca0 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -48,10 +48,7 @@ import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 import { warnOnce } from './warn'
 import { rewriteDefault } from './rewriteDefault'
 import { createCache } from './cache'
-import {
-  shouldTransform as shouldTransformRef,
-  transformAST as transformRefAST
-} from '@vue/reactivity-transform'
+import { shouldTransform, transformAST } from '@vue/reactivity-transform'
 
 // Special compiler macros
 const DEFINE_PROPS = 'defineProps'
@@ -143,7 +140,7 @@ export function compileScript(
   let { script, scriptSetup, source, filename } = sfc
   // feature flags
   // TODO remove support for deprecated options when out of experimental
-  const enableRefTransform =
+  const enableReactivityTransform =
     !!options.reactivityTransform ||
     !!options.refSugar ||
     !!options.refTransform
@@ -170,6 +167,8 @@ export function compileScript(
     scriptLang === 'tsx' ||
     scriptSetupLang === 'ts' ||
     scriptSetupLang === 'tsx'
+
+  // resolve parser plugins
   const plugins: ParserPlugin[] = []
   if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
     plugins.push('jsx')
@@ -193,11 +192,11 @@ export function compileScript(
         sourceType: 'module'
       }).program
       const bindings = analyzeScriptBindings(scriptAst.body)
-      if (enableRefTransform && shouldTransformRef(content)) {
+      if (enableReactivityTransform && shouldTransform(content)) {
         const s = new MagicString(source)
         const startOffset = script.loc.start.offset
         const endOffset = script.loc.end.offset
-        const { importedHelpers } = transformRefAST(scriptAst, s, startOffset)
+        const { importedHelpers } = transformAST(scriptAst, s, startOffset)
         if (importedHelpers.length) {
           s.prepend(
             `import { ${importedHelpers
@@ -862,14 +861,14 @@ export function compileScript(
       }
     }
 
-    // apply ref transform
-    if (enableRefTransform && shouldTransformRef(script.content)) {
-      const { rootRefs: rootVars, importedHelpers } = transformRefAST(
+    // apply reactivity transform
+    if (enableReactivityTransform && shouldTransform(script.content)) {
+      const { rootRefs, importedHelpers } = transformAST(
         scriptAst,
         s,
         scriptStartOffset!
       )
-      refBindings = rootVars
+      refBindings = rootRefs
       for (const h of importedHelpers) {
         helperImports.add(h)
       }
@@ -1109,12 +1108,14 @@ export function compileScript(
     }
   }
 
-  // 3. Apply ref sugar transform
+  // 3. Apply reactivity transform
   if (
-    (enableRefTransform && shouldTransformRef(scriptSetup.content)) ||
+    (enableReactivityTransform &&
+      // normal <script> had ref bindings that maybe used in <script setup>
+      (refBindings || shouldTransform(scriptSetup.content))) ||
     propsDestructureDecl
   ) {
-    const { rootRefs, importedHelpers } = transformRefAST(
+    const { rootRefs, importedHelpers } = transformAST(
       scriptSetupAst,
       s,
       startOffset,