refactor: remove reactivity transform

Author: sxzz

.eslintrc.cjs

@@ -56,9 +56,7 @@ module.exports = {
     },
     // Packages targeting Node
     {
-      files: [
-        'packages/{compiler-sfc,compiler-ssr,server-renderer,reactivity-transform}/**'
-      ],
+      files: ['packages/{compiler-sfc,compiler-ssr,server-renderer}/**'],
       rules: {
         'no-restricted-globals': ['error', ...DOMGlobals],
         'no-restricted-syntax': 'off'

package.json

@@ -33,7 +33,7 @@
     "serve": "serve",
     "open": "open http://localhost:3000/packages/template-explorer/local.html",
     "build-sfc-playground": "run-s build-compiler-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
-    "build-compiler-cjs": "node scripts/build.js compiler reactivity-transform shared -af cjs",
+    "build-compiler-cjs": "node scripts/build.js compiler shared -af cjs",
     "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
     "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",

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

@@ -515,20 +515,20 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > ref 1`] = `
-"import { withAsyncContext as _withAsyncContext, ref as _ref } from 'vue'
+"import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
   async setup(__props, { expose: __expose }) {
   __expose();
 
 let __temp, __restore
-let a = _ref(1 + ((
+let a = ref(1 + ((
   ([__temp,__restore] = _withAsyncContext(() => foo)),
   __temp = await __temp,
   __restore(),
   __temp
 )))
-return { a }
+return { get a() { return a }, set a(v) { a = v } }
 }
 
 }"
@@ -818,16 +818,20 @@ return { bar }
 `;
 
 exports[`SFC compile <script setup> > imports > dedupe between user & helper 1`] = `
-"import { ref as _ref } from 'vue'
-import { ref } from 'vue'
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+import { useCssVars, ref } from 'vue'
       
 export default {
   setup(__props, { expose: __expose }) {
   __expose();
 
-      let foo = _ref(1)
+_useCssVars(_ctx => ({
+  \\"xxxxxxxx-msg\\": (msg.value)
+}))
+
+      const msg = ref()
       
-return { foo, ref }
+return { msg, useCssVars, ref }
 }
 
 }"

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

@@ -240,14 +240,22 @@ describe('SFC compile <script setup>', () => {
       const { content } = compile(
         `
       <script setup>
-      import { ref } from 'vue'
-      let foo = $ref(1)
+      import { useCssVars, ref } from 'vue'
+      const msg = ref()
       </script>
-      `,
-        { reactivityTransform: true }
+      
+      <style>
+      .foo {
+        color: v-bind(msg)
+      }
+      </style>
+      `
       )
       assertCode(content)
-      expect(content).toMatch(`import { ref } from 'vue'`)
+      expect(content).toMatch(
+        `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`
+      )
+      expect(content).toMatch(`import { useCssVars, ref } from 'vue'`)
     })
 
     test('import dedupe between <script> and <script setup>', () => {
@@ -890,9 +898,7 @@ describe('SFC compile <script setup>', () => {
 
   describe('async/await detection', () => {
     function assertAwaitDetection(code: string, shouldAsync = true) {
-      const { content } = compile(`<script setup>${code}</script>`, {
-        reactivityTransform: true
-      })
+      const { content } = compile(`<script setup>${code}</script>`)
       if (shouldAsync) {
         expect(content).toMatch(`let __temp, __restore`)
       }
@@ -910,7 +916,7 @@ describe('SFC compile <script setup>', () => {
     })
 
     test('ref', () => {
-      assertAwaitDetection(`let a = $ref(1 + (await foo))`)
+      assertAwaitDetection(`let a = ref(1 + (await foo))`)
     })
 
     // #4448