feat: support pinia

Author: zhiyuanzmj

README.md

@@ -1,8 +1,8 @@
 # unplugin-vue-reactivity-function [![npm](https://img.shields.io/npm/v/unplugin-vue-reactivity-function.svg)](https://npmjs.com/package/unplugin-vue-reactivity-function)
 
-[![Unit Test](https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function/actions/workflows/unit-test.yml/badge.svg)](https://github.com/unplugin/unplugin-vue-reactivity-function/actions/workflows/unit-test.yml)
+[![Unit Test](https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function/actions/workflows/unit-test.yml/badge.svg)](https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function/actions/workflows/unit-test.yml)
 
-Named export for Vue SFC.
+Reactive Function.
 
 ## Installation
 
@@ -81,6 +81,34 @@ module.exports = {
 
 ## Usage
 
+```ts
+// /store/user.ts
+export const useUserStore = $$defineStore('user', () => {
+  let token = $ref('')
+  function login() {
+    token = 'TOKEN'
+  }
+
+  return {
+    token,
+    login,
+  }
+})
+
+// is equivalent to:
+export const useUserStore = defineStore('user', () => {
+  let token = $ref('')
+  function login() {
+    token = 'TOKEN'
+  }
+
+  return {
+    token: $$(token),
+    login: $$(login),
+  }
+})
+```
+
 ```vue
 <script setup lang="tsx">
 import { useBase64 } from '@vueuse/core'

package.json

@@ -1,8 +1,8 @@
 {
   "name": "unplugin-vue-reactivity-function",
   "version": "0.1.0",
-  "packageManager": "pnpm@8.9.0",
-  "description": "Reactivity function for Vue SFC.",
+  "packageManager": "pnpm@8.10.0",
+  "description": "Reactivity function.",
   "keywords": [
     "unplugin",
     "rollup",
@@ -11,13 +11,13 @@
     "webpack"
   ],
   "license": "MIT",
-  "homepage": "https://github.com/unplugin/unplugin-vue-reactivity-function#readme",
+  "homepage": "https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function#readme",
   "bugs": {
-    "url": "https://github.com/unplugin/unplugin-vue-reactivity-function/issues"
+    "url": "https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/unplugin/unplugin-vue-reactivity-function.git"
+    "url": "git+https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function.git"
   },
   "author": "zhiyuanzmj",
   "files": [

playground/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.5.0",
+    "pinia": "^2.1.7",
     "vue": "^3.3.4"
   },
   "devDependencies": {

playground/pnpm-lock.yaml

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { type Ref, inject, ref, watch } from 'vue'
+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 text = $inject('text', ref('vue'))
+const { token, login } = $toRefs(useUserStore())
+login()
+
+const text = $inject('text', token)
 const { base64 } = $useBase64(text)
 $watch(base64, () => {
   $logRef(base64)

playground/src/App.vue

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const pinia = createPinia()
+createApp(App).use(pinia).mount('#app')

playground/src/main.ts

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

playground/store/user.ts

@@ -21,6 +21,11 @@ function transformArguments(argument: t.Node, s: MagicString, offset: number) {
   ) {
     s.appendLeft(argument.start! + offset, '$$(')
     s.appendRight(argument.end! + offset, ')')
+  } else if (
+    argument.type === 'FunctionExpression' ||
+    argument.type === 'ArrowFunctionExpression'
+  ) {
+    transformFunctionReturn(argument, s, offset)
   } else if (argument.type === 'ArrayExpression') {
     argument.elements.forEach((arg) => {
       transformArguments(arg!, s, offset)
@@ -41,6 +46,23 @@ function transformArguments(argument: t.Node, s: MagicString, offset: number) {
   }
 }
 
+function transformFunctionReturn(node: t.Node, s: MagicString, offset: number) {
+  if (
+    node.type === 'FunctionDeclaration' ||
+    node.type === 'FunctionExpression' ||
+    node.type === 'ArrowFunctionExpression'
+  )
+    if (node.body.type !== 'BlockStatement') {
+      transformArguments(node.body, s, offset)
+    } else {
+      node.body.body?.forEach((statement) => {
+        if (statement.type === 'ReturnStatement' && statement.argument) {
+          transformArguments(statement.argument, s, offset)
+        }
+      })
+    }
+}
+
 function transformReactivityFunction(code: string, id: string) {
   const lang = getLang(id)
   let asts: {

src/index.ts

@@ -35,6 +35,11 @@ function transform({
         argument.getEnd(),
         ')'
       )
+    } else if (
+      ts.isArrowFunction(argument) ||
+      ts.isFunctionExpression(argument)
+    ) {
+      transformFunctionReturn(argument)
     } else if (ts.isArrayLiteralExpression(argument)) {
       argument.forEachChild((arg) => transformArguments(arg))
     } else if (ts.isObjectLiteralExpression(argument)) {
@@ -62,6 +67,26 @@ function transform({
     }
   }
 
+  function transformFunctionReturn(
+    node: import('typescript/lib/tsserverlibrary').Node
+  ) {
+    if (
+      ts.isArrowFunction(node) ||
+      ts.isFunctionExpression(node) ||
+      ts.isFunctionDeclaration(node)
+    ) {
+      if (ts.isArrowFunction(node) && !ts.isBlock(node.body)) {
+        transformArguments(node.body)
+      } else {
+        node.body?.forEachChild((statement) => {
+          if (ts.isReturnStatement(statement) && statement.expression) {
+            transformArguments(statement.expression)
+          }
+        })
+      }
+    }
+  }
+
   function walkReactivityFunction(
     node: import('typescript/lib/tsserverlibrary').Node,
     parent: import('typescript/lib/tsserverlibrary').Node