2023 年终总结:vue-jsx 的最佳实践

7,628 阅读2分钟

前言

Hi,今天是大年29,在新年前的最后两天写一个年终总结,分享一下我是怎么加入 vue-macros 并走上开源的道路。

由于本人的工作中用到了ag-grid所以使用JSX定义cellRenderer成为了我的刚需。我挺喜欢JSX的书写方式,除了用三元表达式和map渲染列表,要是能和vue指令一样简单就好了,于是我在今年8月份左右的时候写了第一个库:

unplugin-jsx-vue-directive

在 JSX 中实现 v-ifv-for 指令,编译的时候把 v-if 转成三元表达式。最初的想法是让所有使用 JSX 的框架都可以使用,所以把 JSX 放在库名的最前面。也因为这个库让我结识到了vue的大佬三咲智子

image.png

当我把这个库分享到了antfu的微信群里后,没过几秒钟智子就给我点了第一个 star,并邀请我把这个功能添加到 vue-macros 里。于是我开始研究 vue-macros,三天后提交了第一个PR

@vue-macros/jsx-directive

实现了v-if,v-for,v-slot,v-memo等常用的vue指令。

<script setup lang="tsx"> 
import Child from './Child.vue'
const { foo, list } = defineProps<{ foo: number list: number[] }>() 
defineRender(( 
  <form onSubmit_prevent> 
    <div v-if={foo === 0}>
      <div v-if={foo === 0}>0-0</div>
      <div v-else-if={foo === 1}>0-1</div> 
      <div v-else>0-2</div> 
    </div> 
    
    <div v-for={(i, index) in list} v-memo={[foo === i]} key={index}>
      {i} 
    </div> 
    
    <Child v-on={{ submit: () => {} }}> 
      default slot 
      <template v-slot:bottom={{ bar }}> 
        <span>{bar}</span> 
      </template> 
    </Child> 
  </form> 
)) 
</script>

由于在JSX中的vue指令没有类型提示,所以又开发了 volar 插件@vue-macros/volar/jsx-directive。其实volar插件的原理和vite插件差不多,都是遍历ast语法树,只不过 volar 使用 TS 遍历,而 vite 使用 babel。找到 vue指令然后替换字符串就可以了,基本逻辑都可以复用。

@vue-macros/export-render

灵感来自于智子的 setup-sfc,原理很简单把 export default 转成 defineRender就可以了。

<script setup lang="tsx"> 
// JSX passed directly 
export default <div>ok</div>

// Or using render function 
export default () => <div>ok</div> 
</script>

@vue-macros/short-bind

如果属性名和属性值一样,可以省略属性值。还可以配合 short-vmodel 一起使用。

<template> 
<input :msg /> 
<!-- => <input :msg="msg" /> --> 
<demo $msg /> 
<!-- => <demo $msg="msg" /> => <demo v-model:msg="msg" /> -->
</template>

没想到在10月份的时候,智子告诉我尤雨溪同意把这个feature 加入到 vue3.4,然后我就给vue/core 提交了第一个 PR

vue-macros-cli

vue-macors init

vue-macros开发的命令行工具,根据你选择的vue-macros语法糖,自动配置tsconfig.jsonvite.config.ts或者nuxt.config.ts

vue-macors sg

得益于 ast-grep,你可以快速的把已有项目的vue template一键转换成vue jsx。之后我所有项目就开始用jsxvue了。

unplugin-vue-components-jsx

JSX中直接使用组件,和vue template一样不需要手动引入了。

灵感来自antfueslint-ts-patch,由于使用了module.register 去改写node_modules,所以需要node18以上版本。

transformer-attributify-jsx-sg

ast-grep 代替正则表达式实现unocssvalueless attributify。正则表达式真的不适合用来处理JSX这种复杂的表达式,虽然已经给unocss提了很多PR了,但新的问题还是不断出现。

相关提案: github.com/unocss/unoc….

volar-plugin-ignore-attributes

JSX中使用unocssAttributify Mode,会有类型提示的报错,官方的解决方案是把所有导致报错的属性注册到AllowedComponentProps里。

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

使用 JSX 意味着失去了 template 自动解包的功能,如果不使用 Reactivity Transform 就不得不给每个 JSX 里的变量添加 .value。但Reactivity Transform的语法又太麻烦了 又不太美观。

所以我做个这个插件 在方法名前面添加一个$符号 就会被编译为$调用。 如果在方法名后面加上$ 就会给所有的参数加上 $$调用

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

JSX 转成 Vapor 的插件,底层使用和官方一样的 IR 层生成真实dom。理论上可以无缝兼容所有的 vue 指令。

// vite.config.ts
import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'

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

Playground: stackblitz.com/github/zhiy…