feat: support $variable

Author: zhiyuanzmj

README.md

@@ -119,32 +119,33 @@ const { token, login } = $toRefs(useUserStore())
 const { token, login } = $(toRefs(useUserStore()))
 login()
 
-const text = $inject('text', token)
+const text = $inject('text', $token)
 // is equivalent to:
 const text = $(inject('text', $$(defaultText)))
 
-const { base64 } = $useBase64(text)
+const { base64 } = $useBase64($text)
 // is equivalent to:
 const { base64 } = $(useBase64($$(text)))
 
-$watch(base64, () => {
-  $console.log(base64)
+watch($base64, () => {
+  console.log(base64)
 })
 // is equivalent to:
 watch($$(base64), () => {
-  console.log($$(base64))
+  console.log(base64)
 })
 
 const stop = $$watch(base64, () => {
-  $console.log(base64)
+  console.log($base64)
+  stop()
 })
 // is equivalent to:
 const stop = watch($$(base64), () => {
   console.log($$(base64))
+  stop()
 })
-stop()
 
-$defineExpose({
+$$defineExpose({
   base64,
 })
 // is equivalent to:

playground/src/App.vue

@@ -1,24 +1,27 @@
 <script setup lang="ts">
-import { type Ref, inject, ref, toRefs, watch } from 'vue'
+import { computed, inject, toRefs, watch } from 'vue'
 import { useBase64 } from '@vueuse/core'
 import { useUserStore } from '../store/user'
 
 const { token, login } = $toRefs(useUserStore())
 login()
 
-const text = $inject('text', token)
-const { base64 } = $useBase64(text)
+const text = $inject('text', $token)
+const { base64 } = $useBase64($text)
 
-$watch(base64, () => {
-  $console.log(base64)
+const a = $computed(() => 1)
+const b = $(computed(() => 1))
+
+watch($base64, () => {
+  console.log(base64)
 })
 
 const stop = $$watch(base64, () => {
-  $console.log(base64)
+  console.log($base64)
+  stop()
 })
-stop()
 
-$defineExpose({
+$$defineExpose({
   base64,
 })
 </script>

src/index.ts

@@ -1,5 +1,6 @@
 import { createUnplugin } from 'unplugin'
 import {
+  MagicString,
   REGEX_SETUP_SFC,
   REGEX_SRC_FILE,
   babelParse,
@@ -9,7 +10,6 @@ import {
   parseSFC,
   walkAST,
 } from '@vue-macros/common'
-import { MagicString } from 'vue/compiler-sfc'
 import { type Options, resolveOption } from './core/options'
 import type * as t from '@babel/types'
 
@@ -97,39 +97,27 @@ function transformReactivityFunction(code: string, id: string) {
   for (const { ast, offset } of asts) {
     walkAST<t.Node>(ast, {
       enter(node, parent) {
-        let name
         if (
-          node.type === 'CallExpression' &&
-          [
-            'Identifier',
-            'MemberExpression',
-            'OptionalMemberExpression',
-          ].includes(node.callee.type) &&
+          node.type === 'Identifier' &&
           /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?(\(|$))/.test(
-            (name = code.slice(
-              node.callee.start! + offset,
-              node.callee.end! + offset
-            ))
+            s.sliceNode(node, { offset })
           )
         ) {
-          if (name.startsWith('$$')) {
-            s.remove(
-              node.callee.start! + offset,
-              node.callee.start! + offset + 2
-            )
-          } else if (parent?.type === 'VariableDeclarator') {
-            s.appendRight(node.callee.start! + offset + 1, '(')
+          if (parent?.type === 'CallExpression' && parent.callee === node) {
+            if (s.sliceNode(node, { offset }).startsWith('$$')) {
+              s.remove(node.start! + offset, node.start! + offset + 2)
+
+              parent.arguments.forEach((argument) => {
+                transformArguments(argument, s, offset)
+              })
+            } else {
+              s.appendRight(node.start! + offset + 1, '(')
+              s.appendRight(parent.end! + offset, ')')
+            }
+          } else if (node.type === 'Identifier') {
+            s.appendRight(node.start! + offset + 1, '$(')
             s.appendRight(node.end! + offset, ')')
-          } else {
-            s.remove(
-              node.callee.start! + offset,
-              node.callee.start! + offset + 1
-            )
           }
-
-          node.arguments.forEach((argument) => {
-            transformArguments(argument, s, offset)
-          })
         }
       },
     })

src/volar.ts

@@ -96,46 +96,54 @@ function transform({
     parent: import('typescript/lib/tsserverlibrary').Node
   ) {
     if (
-      ts.isCallExpression(node) &&
+      ts.isIdentifier(node) &&
       /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?(\(|$))/.test(
-        node.expression.getText(ast)
+        node.getText(ast)
       )
     ) {
-      if (node.expression.getText(ast).startsWith('$$')) {
-        replaceSourceRange(
-          codes,
-          source,
-          node.expression.getStart(ast, false),
-          node.expression.getStart(ast, false) + 2
-        )
-      } else if (ts.isVariableDeclaration(parent)) {
+      if (ts.isCallExpression(parent) && parent.expression === node) {
+        if (node.getText(ast).startsWith('$$')) {
+          replaceSourceRange(
+            codes,
+            source,
+            node.getStart(ast, false),
+            node.getStart(ast, false) + 2
+          )
+          parent.arguments.forEach((argument) => {
+            transformArguments(argument)
+          })
+        } else {
+          replaceSourceRange(
+            codes,
+            source,
+            node.getStart(ast, false) + 1,
+            node.getStart(ast, false) + 1,
+            '('
+          )
+          replaceSourceRange(
+            codes,
+            source,
+            parent.getEnd(),
+            parent.getEnd(),
+            ')'
+          )
+        }
+      } else if (ts.isIdentifier(node)) {
         replaceSourceRange(
           codes,
           source,
-          node.expression.getStart(ast, false) + 1,
-          node.expression.getStart(ast, false) + 1,
-          '('
+          node.getStart(ast, false) + 1,
+          node.getStart(ast, false) + 1,
+          '$('
         )
         replaceSourceRange(codes, source, node.end, node.end, ')')
-      } else {
-        replaceSourceRange(
-          codes,
-          source,
-          node.expression.getStart(ast, false),
-          node.expression.getStart(ast, false) + 1
-        )
       }
-
-      node.arguments.forEach((argument) => {
-        transformArguments(argument)
-      })
     }
 
     node.forEachChild((child) => {
       walkReactivityFunction(child, node)
     })
   }
-
   ast.forEachChild((child) => walkReactivityFunction(child, ast))
 }