feat: allow MemberExpression

Author: zhiyuanzmj

README.md

@@ -82,7 +82,7 @@ module.exports = {
 ## Usage
 
 ```ts
-// /store/user.ts
+// ~/store/user.ts
 export const useUserStore = $$defineStore('user', () => {
   let token = $ref('')
   function login() {
@@ -112,13 +112,14 @@ export const useUserStore = defineStore('user', () => {
 ```vue
 <script setup lang="tsx">
 import { useBase64 } from '@vueuse/core'
+import { useUserStore } from '~/store/user'
 
-function log(...logs: Ref<any>[]) {
-  console.log(logs)
-}
+const { token, login } = $toRefs(useUserStore())
+// is equivalent to:
+const { token, login } = $(toRefs(useUserStore()))
+login()
 
-const defaultText = $ref('vue')
-const text = $inject('text', defaultText)
+const text = $inject('text', token)
 // is equivalent to:
 const text = $(inject('text', $$(defaultText)))
 
@@ -127,19 +128,19 @@ const { base64 } = $useBase64(text)
 const { base64 } = $(useBase64($$(text)))
 
 $watch(base64, () => {
-  $log(base64)
+  $console.log(base64)
 })
 // is equivalent to:
 watch($$(base64), () => {
-  log($$(base64))
+  console.log($$(base64))
 })
 
 const stop = $$watch(base64, () => {
-  $log(base64)
+  $console.log(base64)
 })
 // is equivalent to:
 const stop = watch($$(base64), () => {
-  log($$(base64))
+  console.log($$(base64))
 })
 stop()
 

playground/README.md

@@ -1 +1 @@
-# Vue 3 Macros Playground
+# Reactivity Function Playground

playground/src/App.vue

@@ -3,21 +3,18 @@ import { type Ref, inject, ref, toRefs, watch } from 'vue'
 import { useBase64 } from '@vueuse/core'
 import { useUserStore } from '../store/user'
 
-function logRef(...logs: Ref<any>[]) {
-  console.log(logs)
-}
-
 const { token, login } = $toRefs(useUserStore())
 login()
 
 const text = $inject('text', token)
 const { base64 } = $useBase64(text)
+
 $watch(base64, () => {
-  $logRef(base64)
+  $console.log(base64)
 })
 
 const stop = $$watch(base64, () => {
-  $logRef(base64)
+  $console.log(base64)
 })
 stop()
 

src/index.ts

@@ -94,14 +94,22 @@ 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' &&
-          node.callee.type === 'Identifier' &&
+          [
+            'Identifier',
+            'MemberExpression',
+            'OptionalMemberExpression',
+          ].includes(node.callee.type) &&
           /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?(\(|$))/.test(
-            node.callee.name
+            (name = code.slice(
+              node.callee.start! + offset,
+              node.callee.end! + offset
+            ))
           )
         ) {
-          if (node.callee.name.startsWith('$$')) {
+          if (name.startsWith('$$')) {
             s.remove(
               node.callee.start! + offset,
               node.callee.start! + offset + 2