feat: transform utils to js by detype

packages/cli/src/commands/add.ts

@@ -152,16 +152,15 @@ export const add = new Command()
             file.name,
           )
 
-          if (!config.typescript)
-            filePath = filePath.replace(/\.ts$/, '.js')
-
           // Run transformers.
-          let content = await transformSFC(file, config)
+          const content = await transformSFC(file, config)
-          content = transformImport(content, config)
 
           if (!existsSync(componentDir))
             await fs.mkdir(componentDir, { recursive: true })
 
+          if (!config.typescript)
+            filePath = filePath.replace(/\.ts$/, '.js')
+
           await fs.writeFile(filePath, content)
         }
 

packages/cli/src/commands/init.ts

@@ -28,6 +28,7 @@ import {
   rawConfigSchema,
   resolveConfigPaths,
 } from '../utils/get-config'
+import { transformByDetype } from '../utils/transformers/transform-sfc'
 
 const PROJECT_DEPENDENCIES = {
   base: [
@@ -267,7 +268,7 @@ export async function runInit(cwd: string, config: Config) {
   // Write cn file.
   await fs.writeFile(
     `${config.resolvedPaths.utils}.${extension}`,
-    extension === 'ts' ? templates.UTILS : templates.UTILS_JS,
+    extension === 'ts' ? templates.UTILS : await transformByDetype(templates.UTILS, '.ts'),
     'utf8',
   )
 

packages/cli/src/utils/templates.ts

@@ -25,31 +25,6 @@ export function useEmitAsProps<Name extends string>(
   return result
 }`
 
-export const UTILS_JS = `import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs) {
-  return twMerge(clsx(inputs))
-}
-
-export function useEmitAsProps(emit) {
-  const vm = getCurrentInstance()
-
-  const events = vm?.type.emits
-  const result = {}
-  if (!events?.length) {
-    console.warn(
-      'No emitted event found. Please check component: \${vm?.type.__name}',
-    )
-  }
-
-  events?.forEach((ev) => {
-    result[toHandlerKey(camelize(ev))] = (...arg) => emit(ev, ...arg)
-  })
-  return result
-}
-`
-
 export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],

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

@@ -1,19 +1,25 @@
 import { createRequire } from 'node:module'
 import type { Config } from '../get-config'
+import { transformImport } from './transform-import'
 
 const require = createRequire(import.meta.url)
 const { transform } = require('detype')
 
+export async function transformByDetype(content: string, filename: string) {
+  return await transform(content, filename, {
+    removeTsComments: true,
+  })
+}
+
 interface File {
   name: string
   content: string
 }
 
 export async function transformSFC(file: File, config: Config) {
+  let content = transformImport(file.content, config)
   if (config.typescript)
-    return file.content
+    content = await transformByDetype(content, file.name)
 
-  return await transform(file.content, file.name, {
+  return content
-    removeTsComments: true,
-  })
 }

packages/cli/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "isolatedModules": false,
     "baseUrl": ".",
+    "module": "ES2020",
     "paths": {
       "@/*": ["./*"]
     }