unplugin-vue-reactivity-function

Reactive Function.

Installation

npm i -D unplugin-vue-reactivity-function

Vite

// vite.config.ts
import VueReactivityFunction from 'unplugin-vue-reactivity-function/vite'

export default defineConfig({
  plugins: [VueReactivityFunction()],
})

Rollup

// rollup.config.js
import VueReactivityFunction from 'unplugin-vue-reactivity-function/rollup'

export default {
  plugins: [VueReactivityFunction()],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [require('unplugin-vue-reactivity-function/esbuild')()],
})

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-reactivity-function/webpack')()],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-vue-reactivity-function/webpack')()],
  },
}

Usage

// ~/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),
  }
})

<script setup lang="tsx">
import { useBase64 } from '@vueuse/core'
import { useUserStore } from '~/store/user'

const { token, login } = $toRefs(useUserStore())
// is equivalent to:
const { token, login } = $(toRefs(useUserStore()))
login()

const text = $inject('text', token)
// is equivalent to:
const text = $(inject('text', $$(defaultText)))

const { base64 } = $useBase64(text)
// is equivalent to:
const { base64 } = $(useBase64($$(text)))

$watch(base64, () => {
  $console.log(base64)
})
// is equivalent to:
watch($$(base64), () => {
  console.log($$(base64))
})

const stop = $$watch(base64, () => {
  $console.log(base64)
})
// is equivalent to:
const stop = watch($$(base64), () => {
  console.log($$(base64))
})
stop()

$defineExpose({
  base64,
})
// is equivalent to:
defineExpose({
  base64: $$(base64),
})
</script>

Volar

// tsconfig.json
{
  // ...
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-reactivity-function/volar"]
  }
}

License

MIT License © 2023-PRESENT zhiyuanzmj