🚧

ViteでVue用のdata-test-idを削除したい

2021/05/08に公開

https://forum.vuejs.org/t/how-to-remove-attributes-from-tags-inside-vue-components/24138/3?u=linusborg

こういうやつ。
Vue3になってcompilerの中身が変わってVue2時代の書き方が通じないようだった。

https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc

検索してもいい感じの実装が見つからなかったのでcompilerの型とconsole.logを頼りにそれっぽく動かせたのが下記。
typeconst enumと直接比較できなかったのであまり綺麗ではない。型付け以上のことをしないでほしい。

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
  BaseElementNode,
  DirectiveNode,
  SimpleExpressionNode,
} from '@vue/compiler-core'

const TEST_PREFIX = 'data-test'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          nodeTransforms: [
            (node: any) => {
              if (process.env.E2E === '1') return
              if (!Array.isArray(node.props)) return

              node.props = (node as BaseElementNode).props.filter((p) => {
                switch (p.type) {
                  case 6:
                    return !p.name.startsWith(TEST_PREFIX)
                  case 7: {
                    const dir = p as DirectiveNode
                    if (!dir.arg) return true
                    if (dir.arg.type !== 4) return true
                    return !(dir.arg as SimpleExpressionNode).content.startsWith(
                      TEST_PREFIX
                    )
                  }
                  default:
                    return true
                }
              })
            },
          ],
        },
      },
    }),
  ],
})

Discussion