feat: optimize the Only-Ts display when the props type is an array

Author: a145789

src/transform/props.ts

@@ -11,11 +11,7 @@ import type {
   ObjectExpression,
 } from "@swc/core";
 import { Config, FileType, SetupAst } from "../constants";
-import {
-  getPropsValueIdentifier,
-  getRealSpan,
-  getSpecifierOffset,
-} from "../utils";
+import { getPropsValue, getRealSpan, getSpecifierOffset } from "../utils";
 import { Visitor } from "@swc/core/Visitor.js";
 import type MagicString from "magic-string";
 
@@ -162,12 +158,7 @@ function transformProps(
   const propsType = (propsAst.properties as KeyValueProperty[]).map(
     ({ key, value }) => {
       const keyValue = (key as Identifier).value;
-      const valueIdentifier = getPropsValueIdentifier(
-        value,
-        keyValue,
-        script,
-        offset,
-      );
+      const valueIdentifier = getPropsValue(value, keyValue, script, offset);
       if (valueIdentifier) {
         return valueIdentifier;
       }
@@ -191,7 +182,7 @@ function transformProps(
       }>((p, c) => {
         const typeKeyValue = (c.key as Identifier).value;
         if (typeKeyValue === "type") {
-          p.propType = getPropsValueIdentifier(
+          p.propType = getPropsValue(
             c.value,
             keyValue,
             script,

src/utils.ts

@@ -80,30 +80,36 @@ function getFgVueFile(paths: string[]) {
   return fg.sync(paths).filter((p) => p.endsWith(".vue"));
 }
 
-export function getPropsValueIdentifier(
+function getPropsValueIdentifier(identifier: string) {
+  let value = "";
+  switch (identifier) {
+    case "Function":
+    case "Date": {
+      value = identifier;
+      break;
+    }
+    case "Array": {
+      value = "any[]";
+      break;
+    }
+    default: {
+      value = identifier.toLocaleLowerCase();
+      break;
+    }
+  }
+  return value;
+}
+export function getPropsValue(
   ast: Expression,
   keyValue: string,
   script: string,
   offset: number,
   required = false,
 ) {
   if (ast.type === "Identifier") {
-    let value = "";
-    switch (ast.value) {
-      case "Function":
-      case "Date": {
-        value = ast.value;
-        break;
-      }
-      case "Array": {
-        value = "any[]";
-        break;
-      }
-      default:
-        value = ast.value.toLocaleLowerCase();
-        break;
-    }
-    return `${keyValue}${required ? "" : "?"}: ${value}; `;
+    return `${keyValue}${required ? "" : "?"}: ${getPropsValueIdentifier(
+      ast.value,
+    )}; `;
   }
 
   if (ast.type === "TsAsExpression") {
@@ -114,9 +120,11 @@ export function getPropsValueIdentifier(
   }
 
   if (ast.type === "ArrayExpression") {
-    const { span } = ast;
-    const { start, end } = getRealSpan(span, offset);
-    return `${keyValue}${required ? "" : "?"}: ${script.slice(start, end)}; `;
+    return `${keyValue}${required ? "" : "?"}: ${ast.elements
+      .map((element) =>
+        getPropsValueIdentifier((element!.expression as Identifier).value),
+      )
+      .join(" | ")}; `;
   }
   return "";
 }