# 前言 Hi，今天是大年29，在新年前的最后两天写一个年终总结，分享一下我是怎么加入 [vue-macros](https://vue-macros.dev) 并走上开源的道路。由于本人的工作中用到了`ag-grid`所以使用`JSX`定义`cellRenderer`成为了我的刚需。我挺喜欢`JSX`的书写方式，除了用三元表达式和`map`渲染列表，要是能和`vue指令`一样简单就好了，于是我在今年8月份左右的时候写了第一个库： ## [unplugin-jsx-vue-directive]() 在 JSX 中实现 `v-if` 和 `v-for` 指令，编译的时候把 v-if 转成三元表达式。最初的想法是让所有使用 JSX 的框架都可以使用，所以把 JSX 放在库名的最前面。也因为这个库让我结识到了vue的大佬[三咲智子](https://github.com/sxzz)。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c8583c3a7664b69b712df9983d6d855~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2064&h=720&s=228693&e=png&b=121212) 当我把这个库分享到了`antfu`的微信群里后，没过几秒钟智子就给我点了第一个 star，并邀请我把这个功能添加到 [vue-macros](https://github.com/vue-macros/vue-macros) 里。于是我开始研究 `vue-macros`，三天后提交了第一个[PR](https://github.com/vue-macros/vue-macros/pull/430)。 ## [@vue-macros/jsx-directive](https://vue-macros.dev/features/jsx-directive.html) 实现了`v-if`,`v-for`,`v-slot`,`v-memo`等常用的`vue`指令。 ```html ``` 由于在`JSX`中的`vue指令`没有类型提示，所以又开发了 volar 插件[@vue-macros/volar/jsx-directive](https://github.com/vue-macros/vue-macros/tree/main/packages/volar/src/jsx-directive)。其实`volar`插件的原理和`vite`插件差不多，都是遍历`ast`语法树，只不过 `volar` 使用 `TS` 遍历，而 `vite` 使用 `babel`。找到 `vue指令`然后替换字符串就可以了，基本逻辑都可以复用。 ## [@vue-macros/export-render](https://vue-macros.dev/features/short-bind.html) 灵感来自于智子的 [setup-sfc](https://vue-macros.dev/macros/setup-sfc.html)，原理很简单把 `export default` 转成 `defineRender`就可以了。 ```html ``` ## [@vue-macros/short-bind](https://vue-macros.dev/features/short-bind.html) 如果属性名和属性值一样，可以省略属性值。还可以配合 [short-vmodel](https://vue-macros.dev/macros/short-vmodel.html) 一起使用。 ```html ``` 没想到在10月份的时候，智子告诉我尤雨溪同意把这个`feature` 加入到 [vue3.4](https://blog.vuejs.org/posts/vue-3-4#v-bind-same-name-shorthand)，然后我就给`vue/core` 提交了第一个 [PR](https://github.com/vuejs/core/pull/9451)。 ## [vue-macros-cli](https://github.com/vue-macros/vue-macros-cli) > `vue-macors init` 为`vue-macros`开发的命令行工具，根据你选择的`vue-macros`语法糖，自动配置`tsconfig.json`和`vite.config.ts`或者`nuxt.config.ts`。 > `vue-macors sg` 得益于 [ast-grep](https://ast-grep.github.io/)，你可以快速的把已有项目的`vue template`一键转换成`vue jsx`。之后我所有项目就开始用`jsx`写`vue`了。 ## [unplugin-vue-components-jsx](https://github.com/zhiyuanzmj/unplugin-vue-components-jsx) 在`JSX`中直接使用组件，和`vue template`一样不需要手动引入了。 > 灵感来自`antfu`的 [eslint-ts-patch](https://github.com/antfu/eslint-ts-patch)，由于使用了[module.register](https://nodejs.org/api/module.html) 去改写`node_modules`，所以需要`node18`以上版本。 ## [transformer-attributify-jsx-sg](https://github.com/zhiyuanzmj/transformer-attributify-jsx-sg) 用 [ast-grep](https://ast-grep.github.io/) 代替正则表达式实现`unocss`的[valueless attributify](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#valueless-attributify)。正则表达式真的不适合用来处理`JSX`这种复杂的表达式，虽然已经给`unocss`提了很多`PR`了，但新的问题还是不断出现。 > 相关提案: https://github.com/unocss/unocss/discussions/3346. ## [volar-plugin-ignore-attributes](https://github.com/zhiyuanzmj/volar-plugin-ignore-attributes) 在`JSX`中使用`unocss`的`Attributify Mode`，会有类型提示的报错，官方的解决方案是把所有导致报错的属性注册到`AllowedComponentProps`里。 ```ts import type { AttributifyAttributes } from '@unocss/preset-attributify' declare module '@vue/runtime-dom' { interface HTMLAttributes extends AttributifyAttributes {} } declare module '@vue/runtime-core' { interface AllowedComponentProps extends AttributifyAttributes {} } ``` 这样就会导致一个问题当我想看到组件有哪些属性的时候，这些属性也会跟着出现，影响调试。所以我就写了这个`volar`插件去忽略这些报错的属性。 # [unplugin-vue-reactivity-function](https://github.com/zhiyuanzmj/unplugin-vue-reactivity-function) > 使用 `JSX` 意味着失去了 `template` 自动解包的功能，如果不使用 `Reactivity Transform` 就不得不给每个 `JSX` 里的变量添加 `.value`。但`Reactivity Transform`的语法又太麻烦了又不太美观。所以我做个这个插件在方法名前面添加一个`$`符号就会被编译为`$`调用。如果在方法名后面加上`$` 就会给所有的参数加上 `$$`调用 ``` tsx const { base64 } = $useBase64(text) // 编译为 const { base64 } = $(useBase64(text)) const { base64 } = useBase64$(text) // 编译为 const { base64 } = useBase64($$(text)) const { base64 } = $useBase64$(text) // 编译为 const { base64 } = $(useBase64($$(text))) ``` ## [unplugin-vue-jsx-vapor](https://github.com/zhiyuanzmj/unplugin-vue-jsx-vapor) 把 `JSX` 转成 `Vapor` 的插件，底层使用和官方一样的 `IR` 层生成真实dom。理论上可以无缝兼容所有的 `vue` 指令。 ```ts // vite.config.ts import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite' export default defineConfig({ plugins: [ VueJsxVapor(), ], }) ``` > Playground: https://stackblitz.com/github/zhiyuanzmj/unplugin-vue-jsx-vapor?file=playground%2FApp.vue