fix(cli): use vue-sfc-transformer for SFC transpilation

Replace detypes with vue-sfc-transformer and esbuild.

Resolve script setup macro types declared in normal script blocks.

Preserve JS/TS file handling and format output with Prettier.

Add regression coverage for cross-block props resolution.

Author: 祖士洋

packages/cli/package.json

@@ -81,14 +81,14 @@
   "dependencies": {
     "@dotenvx/dotenvx": "^2.6.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@unovue/detypes": "^0.8.5",
     "@vue/compiler-sfc": "^3.5",
     "c12": "^3.3.4",
     "commander": "^15.0.0",
     "consola": "^3.4.2",
     "dedent": "^1.7.2",
     "deepmerge": "^4.3.1",
     "diff": "^9.0.0",
+    "esbuild": "0.28.1",
     "fs-extra": "^11.3.6",
     "fuzzysort": "^3.1.0",
     "get-tsconfig": "^4.14.0",
@@ -101,6 +101,7 @@
     "pathe": "catalog:",
     "postcss": "^8.5.19",
     "postcss-selector-parser": "^7.1.4",
+    "prettier": "^3.9.6",
     "prompts": "^2.4.2",
     "reka-ui": "catalog:",
     "semver": "^7.8.5",
@@ -112,6 +113,7 @@
     "undici": "^8.9.0",
     "validate-npm-package-name": "catalog:",
     "vue-metamorph": "3.3.4",
+    "vue-sfc-transformer": "^0.1.17",
     "zod": "catalog:",
     "zod-to-json-schema": "^3.25.2"
   },

packages/cli/src/utils/transformers/transform-sfc.ts

@@ -1,18 +1,114 @@
+import type { SFCBlock } from '@vue/compiler-sfc'
 import type { TransformOpts } from '.'
-import { transform } from '@unovue/detypes'
+import { parse } from '@vue/compiler-sfc'
+import { transform } from 'esbuild'
+import MagicString from 'magic-string'
+import { format } from 'prettier'
+import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'
 
 export async function transformSFC(opts: TransformOpts) {
   if (opts.config?.typescript)
     return opts.raw
 
-  return await transformByDetype(opts.raw, opts.filename).then(res => res as string)
+  return opts.filename.endsWith('.vue')
+    ? await transformVueSFC(opts.raw, opts.filename)
+    : await transformScript(opts.raw, opts.filename)
 }
 
-export async function transformByDetype(content: string, filename: string) {
-  return await transform(content, filename, {
-    removeTsComments: true,
-    prettierOptions: {
-      proseWrap: 'never',
-    },
+export async function transformVueSFC(content: string, filename: string) {
+  const { descriptor, errors } = parse(content, {
+    filename,
+    ignoreEmpty: true,
   })
+
+  if (errors.length) {
+    throw new Error(errors.map(error => typeof error === 'string' ? error : error.message).join('\n'))
+  }
+
+  const output = new MagicString(content)
+  const isTypeScriptSFC = [descriptor.script, descriptor.scriptSetup]
+    .some(block => block?.lang === 'ts' || block?.lang === 'tsx')
+
+  if (isTypeScriptSFC && descriptor.template?.ast) {
+    const template = await transpileVueTemplate(
+      descriptor.template.content,
+      descriptor.template.ast as Parameters<typeof transpileVueTemplate>[1],
+      descriptor.template.loc.start.offset,
+      async code => await stripTypeScript(code, 'ts'),
+    )
+    replaceBlockContent(output, content, descriptor.template, template)
+  }
+
+  if (descriptor.script?.lang === 'ts' || descriptor.script?.lang === 'tsx') {
+    const script = await stripTypeScript(descriptor.script.content, descriptor.script.lang)
+    replaceBlockContent(output, content, descriptor.script, script, true)
+  }
+
+  if (descriptor.scriptSetup?.lang === 'ts' || descriptor.scriptSetup?.lang === 'tsx') {
+    const preTranspiled = await preTranspileScriptSetup(
+      descriptor as Parameters<typeof preTranspileScriptSetup>[0],
+      filename,
+    )
+    const scriptSetup = await stripTypeScript(preTranspiled.content, descriptor.scriptSetup.lang)
+    replaceBlockContent(output, content, descriptor.scriptSetup, scriptSetup, true)
+  }
+
+  return await format(output.toString(), {
+    parser: 'vue',
+    proseWrap: 'never',
+  })
+}
+
+async function transformScript(content: string, filename: string) {
+  const loader = getScriptLoader(filename)
+
+  if (!loader)
+    return content
+
+  const output = await stripTypeScript(content, loader)
+
+  return await format(output, {
+    parser: loader === 'ts' || loader === 'tsx' ? 'typescript' : 'babel',
+    proseWrap: 'never',
+  })
+}
+
+function getScriptLoader(filename: string) {
+  if (filename.endsWith('.tsx'))
+    return 'tsx' as const
+  if (filename.endsWith('.jsx'))
+    return 'jsx' as const
+  if (['.js', '.cjs', '.mjs'].some(extension => filename.endsWith(extension)))
+    return 'js' as const
+  if (['.ts', '.cts', '.mts'].some(extension => filename.endsWith(extension)))
+    return 'ts' as const
+}
+
+async function stripTypeScript(content: string, loader: 'js' | 'jsx' | 'ts' | 'tsx') {
+  const result = await transform(content, {
+    loader,
+    target: 'esnext',
+    legalComments: 'none',
+  })
+
+  return result.code.trimEnd()
+}
+
+function replaceBlockContent(
+  output: MagicString,
+  source: string,
+  block: SFCBlock,
+  content: string,
+  removeTypeScriptLang = false,
+) {
+  output.overwrite(block.loc.start.offset, block.loc.end.offset, content)
+
+  if (!removeTypeScriptLang)
+    return
+
+  const blockStart = source.lastIndexOf(`<${block.type}`, block.loc.start.offset)
+  const openTag = source.slice(blockStart, block.loc.start.offset)
+  const transformedOpenTag = openTag.replace(/\s+lang=(?:"tsx?"|'tsx?'|tsx?)(?=\s|>)/, '')
+
+  output.overwrite(blockStart, block.loc.start.offset, transformedOpenTag)
 }

packages/cli/test/utils/transform-sfc.test.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'pathe'
 import { describe, expect, it } from 'vitest'
 import { transform } from '../../src/utils/transformers'
+import { transformVueSFC } from '../../src/utils/transformers/transform-sfc'
 
 describe('transformSFC', () => {
   it('basic', async () => {
@@ -87,6 +88,22 @@ describe('transformSFC', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('resolves props declared in a normal script block', async () => {
+    const result = await transformVueSFC(`<script lang="ts">
+      export interface Props {
+        foo: string
+      }
+      </script>
+
+      <script lang="ts" setup>
+      const props = defineProps<Props>()
+      </script>
+      `, 'app.vue')
+
+    expect(result).toContain('foo: { type: String, required: true }')
+    expect(result).not.toContain('lang="ts"')
+  })
+
   it('defineProps with withDefaults', async () => {
     const result = await transform({
       filename: 'app.vue',