refactor(plugin): reorg code structure

Author: akinoccc

packages/playground/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vue-styled-components/playground",
+  "type": "module",
   "scripts": {
     "dev": "vite"
   },

packages/playground/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

packages/playground/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.less'],
   },
   plugins: [
-    p(),
+    p() as any,
     vue({
       script: {
         defineModel: true,

packages/plugins/typescript-syntax/package.json

@@ -36,7 +36,7 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^5.0.0"
   },
   "publishConfig": {
     "access": "public",
@@ -50,14 +50,13 @@
     "@babel/traverse": "^7.26.10",
     "@babel/types": "^7.26.10",
     "@vue/compiler-sfc": "^3.5.13",
-    "magic-string": "^0.30.17",
-    "typescript": "^5.7.2",
-    "vitest": "^3.0.8",
-    "vue": "^3.5.13"
+    "magic-string": "^0.30.17"
   },
   "devDependencies": {
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
-    "@vitest/ui": "^3.0.8"
+    "@vitest/ui": "^3.0.8",
+    "typescript": "^5.7.2",
+    "vitest": "^3.0.8"
   }
 }

packages/plugins/typescript-syntax/src/ts-transformer.ts

@@ -1,16 +1,5 @@
 import type { TransformResult } from './types/types'
-import * as parser from '@babel/parser'
-import MagicString from 'magic-string'
-import {
-  collectTypesFromAST,
-  endTimer,
-  hasStyledComponents,
-  logDebug,
-  resetContext,
-  startTimer,
-  transformStyledComponents,
-  useContext,
-} from './utils'
+import { transformCore } from './utils'
 
 /**
  * 转换styled组件语法
@@ -20,70 +9,10 @@ import {
  * @returns 转换结果，如果没有变化则为null
  */
 export function transformStyledSyntax(code: string, id: string): TransformResult | null {
-  // 开始整体转换计时
-  startTimer('transformStyledSyntax')
-
-  try {
-    if (!hasStyledComponents(code)) {
-      return null
-    }
-
-    // 使用 MagicString 进行精确替换
-    const s = new MagicString(code)
-
-    // 重置并获取类型上下文
-    resetContext(id)
-    const typeContext = useContext(false, id)
-
-    // 解析代码计时
-    startTimer('parseCode')
-    // 使用Babel解析代码
-    const ast = parser.parse(code, {
-      sourceType: 'module',
-      plugins: [
-        'jsx',
-        'typescript',
-        ['decorators', { decoratorsBeforeExport: true }],
-      ],
-      errorRecovery: true,
-    })
-    endTimer('parseCode')
-
-    // 收集类型信息计时
-    startTimer('collectTypes')
-    // 收集所有类型信息
-    collectTypesFromAST(ast, true)
-    endTimer('collectTypes')
-
-    // 转换 styled 组件计时
-    startTimer('transformStyled')
-    // 使用公共函数处理styled组件转换
-    const { hasChanges, props } = transformStyledComponents(ast, code, s, 0)
-    endTimer('transformStyled')
-
-    // 如果没有变更，返回null
-    if (!hasChanges) {
-      endTimer('transformStyledSyntax')
-      return null
-    }
-
-    const result = {
-      code: s.toString(),
-      map: s.generateMap({ source: id, includeContent: true }),
-      props,
-    }
-
-    // 记录转换完成
-    logDebug(`转换完成: ${id}, 文件大小: ${code.length} -> ${result.code.length} 字节`)
-
-    // 结束整体转换计时
-    endTimer('transformStyledSyntax')
-
-    return result
-  }
-  catch (err) {
-    // 发生错误时也结束计时
-    endTimer('transformStyledSyntax')
-    throw err
-  }
+  // 使用通用转换核心函数处理
+  return transformCore({
+    code,
+    id,
+    timerLabel: 'transformStyledSyntax',
+  })
 }

packages/plugins/typescript-syntax/src/utils/index.ts

@@ -54,6 +54,9 @@ export {
   processNestedGeneric,
 } from './styled-transformers'
 
+// 导出 transform-core.ts 的函数
+export { transformCore } from './transform-core'
+
 export * from './type-collectors'
 
 export {