refactor: replace detypes with @unovue/detypes

packages/cli/package.json

@@ -50,13 +50,12 @@
     "vitest": "*"
   },
   "dependencies": {
-    "@babel/core": "^7.24.7",
     "@babel/parser": "^7.24.7",
+    "@unovue/detypes": "^0.8.3",
     "@vue/compiler-sfc": "^3.4",
     "c12": "^1.11.1",
     "commander": "^12.1.0",
     "consola": "^3.2.3",
-    "detype": "npm:detypes@^0.8.0",
     "diff": "^5.2.0",
     "fs-extra": "^11.2.0",
     "https-proxy-agent": "^7.0.4",

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

@@ -1,10 +1,6 @@
-import { createRequire } from 'node:module'
+import { transform } from 'detypes'
 import type { TransformOpts } from '.'
 
-// required cause Error: Dynamic require of "@babel/core" is not supported
-const require = createRequire(import.meta.url)
-const { transform } = require('detype')
-
 export async function transformSFC(opts: TransformOpts) {
   if (opts.config?.typescript)
     return opts.raw
@@ -15,5 +11,8 @@ export async function transformSFC(opts: TransformOpts) {
 export async function transformByDetype(content: string, filename: string) {
   return await transform(content, filename, {
     removeTsComments: true,
+    prettierOptions: {
+      proseWrap: 'never',
+    },
   })
 }

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

@@ -84,3 +84,27 @@ const array = [1, 2, 3];
 <style scoped></style>
 "
 `;
+
+exports[`transformSFC > remove all type reference, keeping similar template 1`] = `
+"<script setup>
+const array = [1, 2, 3];
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+    "
+  >
+    {{ true ? 123 : 0 }}
+  </div>
+</template>
+
+<style scoped></style>
+"
+`;

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

@@ -48,6 +48,33 @@ describe('transformSFC', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('remove all type reference, keeping similar template', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      const array: (number | string)[] = [1, 2, 3]
+      </script>
+      
+      <template>
+        <div :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      ">
+          {{ true ? 123 as number : 0 }}
+        </div>
+      </template>
+      
+      <style scoped>
+      </style>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
+
   it('defineProps', async () => {
     const result = await transform({
       filename: 'app.vue',