feat: add variable$

Author: zhiyuanzmj

README.md

@@ -83,7 +83,7 @@ module.exports = {
 
 ```ts
 // ~/store/user.ts
-export const useUserStore = $$defineStore('user', () => {
+export const useUserStore = defineStore$('user', () => {
   let token = $ref('')
   function login() {
     token = 'TOKEN'
@@ -119,24 +119,20 @@ 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)
-})
+provide$('base64', base64)
 // is equivalent to:
-watch($$(base64), () => {
-  console.log(base64)
-})
+provide('base64', $$(base64))
 
-const stop = $$watch(base64, () => {
-  console.log($base64)
+const stop = watch$(base64, () => {
+  console.log$(base64)
   stop()
 })
 // is equivalent to:
@@ -145,7 +141,7 @@ const stop = watch($$(base64), () => {
   stop()
 })
 
-$$defineExpose({
+defineExpose$({
   base64,
 })
 // is equivalent to:

playground/src/App.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import { inject, toRefs, watch } from 'vue'
+import { inject, provide, 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)
+provide$('base64', base64)
 
-watch($base64, () => {
-  console.log(base64)
-})
-
-const stop = $$watch(base64, () => {
-  console.log($base64)
+const stop = watch$(base64, () => {
+  console.log$(base64)
   stop()
 })
 
-$$defineExpose({
+defineExpose$({
   base64,
 })
 </script>

playground/store/user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 
-export const useUserStore = $$defineStore('user', () => {
+export const useUserStore = defineStore$('user', () => {
   let token = $ref('')
   function login() {
     token = 'TOKEN'

src/index.ts

@@ -96,32 +96,24 @@ function transformReactivityFunction(code: string, id: string) {
 
   for (const { ast, offset } of asts) {
     walkAST<t.Node>(ast, {
-      enter(node, parent) {
+      enter(node) {
+        if (node.type !== 'CallExpression') return
+
         if (
-          node.type === 'Identifier' &&
           /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?(\(|$))/.test(
-            s.sliceNode(node, { offset })
+            s.sliceNode(node.callee, { offset })
           )
         ) {
-          if (parent?.type === 'CallExpression' && parent.callee === node) {
-            if (s.sliceNode(node, { offset }).startsWith('$$')) {
-              s.remove(node.start! + offset, node.start! + offset + 2)
+          s.appendRight(node.callee.start! + offset + 1, '(')
+          s.appendRight(node.end! + offset, ')')
+        }
+
+        if (s.sliceNode(node.callee, { offset }).endsWith('$')) {
+          s.remove(node.callee.end! + offset - 1, node.callee.end! + offset)
 
-              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' &&
-            parent?.type !== 'MemberExpression' &&
-            parent?.type !== 'VariableDeclarator'
-          ) {
-            s.appendRight(node.start! + offset + 1, '$(')
-            s.appendRight(node.end! + offset, ')')
-          }
+          node.arguments.forEach((argument) => {
+            transformArguments(argument, s, offset)
+          })
         }
       },
     })

src/volar.ts

@@ -95,52 +95,32 @@ function transform({
     node: import('typescript/lib/tsserverlibrary').Node,
     parent: import('typescript/lib/tsserverlibrary').Node
   ) {
-    if (
-      ts.isIdentifier(node) &&
-      /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?(\(|$))/.test(
-        node.getText(ast)
-      )
-    ) {
-      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) &&
-        !ts.isPropertyAccessExpression(parent) &&
-        !ts.isVariableDeclaration(parent)
+    if (ts.isCallExpression(node)) {
+      if (
+        /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?(\(|$))/.test(
+          node.expression.getText(ast)
+        )
       ) {
         replaceSourceRange(
           codes,
           source,
-          node.getStart(ast, false) + 1,
-          node.getStart(ast, false) + 1,
-          '$('
+          node.expression.getStart(ast, false) + 1,
+          node.expression.getStart(ast, false) + 1,
+          '('
         )
-        replaceSourceRange(codes, source, node.end, node.end, ')')
+        replaceSourceRange(codes, source, node.getEnd(), node.getEnd(), ')')
+      }
+
+      if (node.expression.getText(ast).endsWith('$')) {
+        replaceSourceRange(
+          codes,
+          source,
+          node.expression.getEnd() - 1,
+          node.expression.getEnd()
+        )
+        node.arguments.forEach((argument) => {
+          transformArguments(argument)
+        })
       }
     }
 

tests/fixtures/basic.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import {ref, watch} from 'vue'
+import { ref, watch } from 'vue'
 
 function useApi(defaultName = ref('')){
   const id = ref(1)
@@ -12,13 +12,13 @@ function useApi(defaultName = ref('')){
 
 const { id, name } = $useApi()
 id === 1
-useApi($name)
+useApi$(name)
 
-watch($name,()=>{
+watch$(name,()=>{
   
 })
 
-$$defineExpose({
+defineExpose$({
   name,
 })
 </script>