Skip to content

zhiyuanzmj/unplugin-vue-reactivity-function

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b5314f4 · Dec 26, 2024

History

52 Commits
May 30, 2024
Oct 31, 2023
Dec 9, 2024
Dec 26, 2024
Dec 9, 2024
Oct 31, 2023
Oct 31, 2023
Oct 31, 2023
Oct 31, 2023
Dec 9, 2024
May 30, 2024
Dec 26, 2024
Nov 13, 2024
May 30, 2024
Nov 6, 2024

Repository files navigation

unplugin-vue-reactivity-function npm

Unit Test

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