Skip to content

Commit

Permalink
feat: support pinia
Browse files Browse the repository at this point in the history
  • Loading branch information
zhiyuanzmj committed Nov 2, 2023
1 parent 79cc7bb commit 29dd39c
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 10 deletions.
32 changes: 30 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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'
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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": [
Expand Down
1 change: 1 addition & 0 deletions playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
},
"dependencies": {
"@vueuse/core": "^10.5.0",
"pinia": "^2.1.7",
"vue": "^3.3.4"
},
"devDependencies": {
Expand Down
25 changes: 25 additions & 0 deletions playground/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 6 additions & 2 deletions playground/src/App.vue
Original file line number Diff line number Diff line change
@@ -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)

Check warning on line 7 in playground/src/App.vue

View workflow job for this annotation

GitHub Actions / lint

Unexpected console statement
}
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)
Expand Down
4 changes: 3 additions & 1 deletion playground/src/main.ts
Original file line number Diff line number Diff line change
@@ -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')
13 changes: 13 additions & 0 deletions playground/store/user.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { defineStore } from 'pinia'

export const useUserStore = $$defineStore('user', () => {
let token = $ref('')
function login() {
token = 'TOKEN'
}

return {
token,
login,
}
})
22 changes: 22 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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: {
Expand Down
25 changes: 25 additions & 0 deletions src/volar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 29dd39c

Please sign in to comment.