unplugin-vue-reactivity-function

Reactivity Function.

Installation

npm i -D unplugin-vue-reactivity-function

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

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

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

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

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

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

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

// 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', () => {
  const token = ref('')
  function login() {
    token.value = 'TOKEN'
  }

  return {
    token,
    login,
  }
})

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

const { token, login } = $useUserStore()
;[token]
// convert to:
const { token, login } = toRefs(useUserStore())
;[login.value]

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

const { base64 } = $useBase64$(text)
;[base64]
// convert to:
let { base64 } = useBase64(text.value)
;[base64.value]

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

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

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

let compRef = $useRef()
;[compRef]
defineRender(<Comp ref$={compRef} />)
// convert to:
let compRef = useRef()
;[compRef.value]
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'],
    }),
  ],
}

ESLint

Convert to reactivity function.

// ./eslint.config.js
import reactivityFunction from 'unplugin-vue-reactivity-function/eslint'

export default [reactivityFunction()]

License

MIT License © 2023-PRESENT zhiyuanzmj