unplugin-vue-reactivity-function

Reactivity 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({
      ignore: ['$fetch'],
    }),
  ],
})

Rollup

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

export default {
  plugins: [
    VueReactivityFunction({
      ignore: ['$fetch'],
    }),
  ],
}

esbuild

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

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

Webpack

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

Vue CLI

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

Usage

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

  return {
    token,
    login,
  }
})

// convert 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())
// convert to:
const { token, login } = $(toRefs(useUserStore()))
login()

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

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

provide$('base64', base64)
// convert to:
provide('base64', $$(base64))

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

defineExpose$({
  base64,
})
// convert to:
defineExpose({
  base64: $$(base64),
})

let compRef = $useRef()
defineRender(<Comp ref$={compRef} />)
// convert to:
let compRef = $(useRef())
defineRender(<Comp ref={$$(compRef)} />)
</script>

Volar Config

// tsconfig.json
{
  // ...
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-reactivity-function/volar"],
    "reactivityFunction": {
      "ignore": ["$fetch"],
    },
  },
}

TS Macro Config

import reactivityFunction from 'unplugin-vue-reactivity-function/volar'

export default {
  plugins: [
    reactivityFunction({
      ignore: ['$fetch'],
    }),
  ],
}

License

MIT License © 2023-PRESENT zhiyuanzmj