fix(plugin): some usage not support

Author: akinoccc

.vscode/settings.json

@@ -1,3 +1,37 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  // Disable the default formatter
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "@stylistic", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

packages/plugins/typescript-syntax/__tests__/basic.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { transformStyledSyntax } from '../src/ts-transformer'
-import { normalizeString } from './normalize'
+import { extractPropsFromCode } from './normalize'
 
 describe('基本语法转换', () => {
   it('应该转换简单的 styled.tag<Props> 为 styled("tag", { primary: { type: Boolean, required: false } })', () => {
@@ -19,7 +19,11 @@ describe('基本语法转换', () => {
     const result = transformStyledSyntax(code, 'test.tsx')
 
     expect(result).not.toBeNull()
-    expect(result?.code).toContain(`styled('button', { primary: { type: Boolean, required: false } })`)
+
+    const props = extractPropsFromCode(result?.props?.[0], 'Button')
+    expect(props).toHaveProperty('primary')
+    expect(props.primary.type).toBe('Boolean')
+    expect(props.primary.required).toBe(false)
   })
 
   it('应该转换行内泛型定义', () => {
@@ -35,8 +39,14 @@ describe('基本语法转换', () => {
     const result = transformStyledSyntax(code, 'test.tsx')
 
     expect(result).not.toBeNull()
-    /* console.log(result?.code) */
-    expect(normalizeString(result?.code)).toContain(normalizeString(`styled('a', { active: { type: Boolean, required: true }, disabled: { type: Boolean, required: false } })`))
+
+    const props = extractPropsFromCode(result?.props?.[0], 'Link')
+    expect(props).toHaveProperty('active')
+    expect(props).toHaveProperty('disabled')
+    expect(props.active.type).toBe('Boolean')
+    expect(props.active.required).toBe(true)
+    expect(props.disabled.type).toBe('Boolean')
+    expect(props.disabled.required).toBe(false)
   })
 
   it('不应该转换没有泛型的样式组件', () => {
@@ -93,7 +103,17 @@ describe('基本语法转换', () => {
     const result = transformStyledSyntax(code, 'test.tsx')
 
     expect(result).not.toBeNull()
-    expect(result?.code).toContain(`styled('button', { primary: { type: Boolean, required: false } })`)
-    expect(result?.code).toContain(`styled('span', { size: { type: Number, required: false } })`)
+
+    // 检查第一个组件
+    const buttonProps = extractPropsFromCode(result?.props?.[0], 'Button')
+    expect(buttonProps).toHaveProperty('primary')
+    expect(buttonProps.primary.type).toBe('Boolean')
+    expect(buttonProps.primary.required).toBe(false)
+
+    // 检查第二个组件
+    const iconProps = extractPropsFromCode(result?.props?.[1], 'Icon')
+    expect(iconProps).toHaveProperty('size')
+    expect(iconProps.size.type).toBe('Number')
+    expect(iconProps.size.required).toBe(false)
   })
 })

packages/plugins/typescript-syntax/__tests__/complex.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { transformStyledSyntax } from '../src/ts-transformer'
-import { normalizeString } from './normalize'
+import { extractPropsFromCode } from './normalize'
 
 describe('复杂泛型语法转换', () => {
   it('应该转换嵌套泛型', () => {
@@ -24,7 +24,15 @@ describe('复杂泛型语法转换', () => {
     const result = transformStyledSyntax(code, 'test.tsx')
 
     expect(result).not.toBeNull()
-    expect(normalizeString(result?.code)).toContain(normalizeString(`styled('input', { value: { type: String, required: false }, onChange: { type: Function, required: false }, placeholder: { type: String, required: false } })`))
+
+    const props = extractPropsFromCode(result?.props?.[0], 'Input')
+    expect(props).toHaveProperty('value')
+    expect(props).toHaveProperty('onChange')
+    expect(props).toHaveProperty('placeholder')
+    expect(props.value.type).toBe('String')
+    expect(props.value.required).toBe(false)
+    expect(props.onChange.type).toBe('Function')
+    expect(props.placeholder.type).toBe('String')
   })
 
   it('应该转换多行泛型定义', () => {
@@ -44,11 +52,14 @@ describe('复杂泛型语法转换', () => {
 
     expect(result).not.toBeNull()
 
-    expect(normalizeString(result?.code)).toContain(normalizeString(`styled('button', {
-        primary: { type: Boolean, required: false },
-        size: { type: String, required: false },
-        disabled: { type: Boolean, required: false }
-      })`))
+    const props = extractPropsFromCode(result?.props?.[0], 'Button')
+    expect(props).toHaveProperty('primary')
+    expect(props).toHaveProperty('size')
+    expect(props).toHaveProperty('disabled')
+    expect(props.primary.type).toBe('Boolean')
+    expect(props.primary.required).toBe(false)
+    expect(props.size.type).toBe('String')
+    expect(props.disabled.type).toBe('Boolean')
   })
 
   it('应该转换带条件类型的复杂泛型', () => {
@@ -74,16 +85,12 @@ describe('复杂泛型语法转换', () => {
     const result = transformStyledSyntax(code, 'test.tsx')
 
     expect(result).not.toBeNull()
-    expect(normalizeString(result?.code)).toContain(normalizeString(`styled('button', {
-      variant: {
-        type: String,
-        required: false
-      },
-      style: {
-        type: String,
-        required: false
-      }
-    })`))
+
+    const props = extractPropsFromCode(result?.props?.[0], 'Button')
+    expect(props).toHaveProperty('variant')
+    expect(props).toHaveProperty('style')
+    expect(props.variant.required).toBe(false)
+    expect(props.style.required).toBe(false)
   })
 
   it('应该转换组合多个泛型和接口的类型', () => {
@@ -113,25 +120,14 @@ describe('复杂泛型语法转换', () => {
     const result = transformStyledSyntax(code, 'test.tsx')
 
     expect(result).not.toBeNull()
-    expect(normalizeString(result?.code)).toContain(normalizeString(`styled('button', 
-        {
-          fullWidth: {
-            type: Boolean,
-            required: false
-          },
-          outlined: {
-            type: Boolean,
-            required: false
-          },
-          theme: {
-            type: String,
-            required: false
-          },
-          size: {
-            type: String,
-            required: false
-          }
-        }
-      )`))
+
+    const props = extractPropsFromCode(result?.props?.[0], 'ComplexButton')
+    expect(props).toHaveProperty('theme')
+    expect(props).toHaveProperty('size')
+    expect(props).toHaveProperty('fullWidth')
+    expect(props).toHaveProperty('outlined')
+    expect(props.theme.type).toBe('String')
+    expect(props.fullWidth.type).toBe('Boolean')
+    expect(props.fullWidth.required).toBe(false)
   })
 })