vue-sfc-transformer

Tools for minimal TypeScript transpilation of Vue SFCs

Usage

Install package:

# npm
npm install vue-sfc-transformer

# pnpm
pnpm install vue-sfc-transformer

import { parse as parseDOM } from '@vue/compiler-dom'
import { parse as parseSFC } from '@vue/compiler-sfc'
import { transform } from 'esbuild'

import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'

const src = `
<template>
  <div v-if="test as any" />
</template>

<script setup lang="ts">
defineProps<{
  test?: string
}>()
</script>
`

const transpiledTemplate = await transpileVueTemplate(
  src,
  parseDOM(src, { parseMode: 'base' }),
  0,
  async (code) => {
    const res = await transform(code, { loader: 'ts', target: 'esnext' })
    return res.code
  },
)

console.log(transpiledTemplate)
// <template>
//   <div v-if="test" />
// </template>
//
// <script setup lang="ts">
// defineProps<{
//   test?: string
// }>()
// </script>

const sfc = parseSFC(transpiledTemplate, {
  filename: 'test.vue',
  ignoreEmpty: true,
})

const { content: scriptBlockContents } = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
console.log(scriptBlockContents)

// defineProps({
//   test: {
//     type: String,
//     required: false
//   }
// })

If you are using mkdist, vue-sfc-transformer exports a loader you can use:

import { vueLoader } from 'vue-sfc-transformer/mkdist'

💻 Development

• Clone this repository
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

Credits

This package was based on the work of contributors to mkdist, and in particular this PR by @Teages: unjs/mkdist#300.

License

Made with ❤️

Published under MIT License.