Merge pull request #13 from jaredmcateer/prop-types

jaredmcateer · web-flow · commit b9f6445e52ba · 2022-05-26T16:36:28.000-06:00
diff --git a/src/plugins/vue-property-decorator/Prop.ts b/src/plugins/vue-property-decorator/Prop.ts
@@ -9,6 +9,7 @@ import ts from "typescript";
 import { TsHelper } from "../../helpers/TsHelper";
 
 const propDecoratorName = "Prop";
+let $t: TsHelper;
 
 export const convertProp: ASTConverter<ts.PropertyDeclaration> = (node, options) => {
   if (!node.decorators) {
@@ -19,28 +20,30 @@ export const convertProp: ASTConverter<ts.PropertyDeclaration> = (node, options)
   );
   if (decorator) {
     const propType = "PropType";
-    const $t = new TsHelper(options);
-    const type = node.type?.kind;
+    $t = new TsHelper(options);
+    let type = node.type?.kind;
     const decoratorArguments = (decorator.expression as ts.CallExpression).arguments;
     const hasKnowableType =
       type !== undefined &&
       type !== ts.SyntaxKind.AnyKeyword &&
       type !== ts.SyntaxKind.UndefinedKeyword &&
       type !== ts.SyntaxKind.UnknownKeyword;
-    let addedPropKey = false;
+    let addedPropType = false;
+    let addTodoComplex = false;
+
+    let props: ts.ObjectLiteralElementLike[] = [];
+    const propName = node.name.getText();
 
     if (decoratorArguments.length > 0 || hasKnowableType) {
-      const propName = node.name.getText();
       const propArguments = decoratorArguments[0];
-      let props: ts.ObjectLiteralElementLike[] = [];
       if (propArguments && $t.module.isObjectLiteralExpression(propArguments)) {
         props = propArguments.properties.reduce((accumulator, property) => {
           if (property.kind === ts.SyntaxKind.PropertyAssignment) {
             let initializer: ts.AsExpression = property.initializer as ts.AsExpression;
             if (node.type && property.name.getText() === "type") {
               const typeReference = $t.factory.createTypeReferenceNode(propType, [node.type]);
               initializer = $t.factory.createAsExpression(property.initializer, typeReference);
-              addedPropKey = true;
+              addedPropType = true;
             }
 
             const newProperty = $t.factory.createPropertyAssignment(property.name, initializer);
@@ -49,26 +52,91 @@ export const convertProp: ASTConverter<ts.PropertyDeclaration> = (node, options)
 
           return accumulator;
         }, [] as ts.ObjectLiteralElementLike[]);
-      }
+      } else if (node.type && hasKnowableType) {
+        let primType: string | undefined;
+
+        if ($t.module.isLiteralTypeNode(node.type)) {
+          type = node.type.literal.kind;
+        }
 
-      const args = $t.factory.createObjectLiteralExpression(props);
-
-      return {
-        tag: "Prop",
-        kind: ASTResultKind.COMPOSITION,
-        imports: addedPropKey ? $t.namedImports([propType]) : [],
-        reference: ReferenceKind.PROPS,
-        attributes: [propName],
-        nodes: [
-          $t.copySyntheticComments($t.factory.createPropertyAssignment(propName, args), node),
-        ],
-      };
+        switch (type) {
+          case ts.SyntaxKind.StringLiteral:
+            addedPropType = true;
+            primType = "String";
+            break;
+          case ts.SyntaxKind.StringKeyword:
+            primType = "String";
+            break;
+          case ts.SyntaxKind.TrueKeyword:
+          case ts.SyntaxKind.FalseKeyword:
+            addedPropType = true;
+            primType = "Boolean";
+            break;
+          case ts.SyntaxKind.BooleanKeyword:
+            primType = "Boolean";
+            break;
+          case ts.SyntaxKind.NumericLiteral:
+            addedPropType = true;
+            primType = "Number";
+            break;
+          case ts.SyntaxKind.NumberKeyword:
+            primType = "Number";
+            break;
+          default:
+            addTodoComplex = true;
+            break;
+        }
+
+        if (primType) {
+          const vueIdentifier = $t.factory.createIdentifier(primType);
+          const tsIdentifier = addedPropType
+            ? $t.factory.createIdentifier(node.type.getText())
+            : undefined;
+          props = [createPropTypeAssignment(vueIdentifier, tsIdentifier)];
+        }
+      }
     }
+    const args = $t.factory.createObjectLiteralExpression(props.length > 0 ? props : undefined);
+    let propAssignment = $t.factory.createPropertyAssignment(propName, args);
+    propAssignment = addTodoComplex
+      ? $t.addTodoComment(
+          propAssignment,
+          `Too complex to determine primitive type: ${node.type!.getText()} `,
+          true
+        )
+      : propAssignment;
+
+    return {
+      tag: "Prop",
+      kind: ASTResultKind.COMPOSITION,
+      imports: addedPropType ? $t.namedImports([propType]) : [],
+      reference: ReferenceKind.PROPS,
+      attributes: [propName],
+      nodes: [$t.copySyntheticComments(propAssignment, node)],
+    };
   }
 
   return false;
 };
 
+function createPropTypeAssignment(
+  vueTypeIdentifier: ts.Identifier,
+  tsTypeIdentifier?: ts.Identifier
+) {
+  const typeId = $t.factory.createIdentifier("type");
+
+  if (!tsTypeIdentifier) {
+    return $t.factory.createPropertyAssignment(typeId, vueTypeIdentifier);
+  }
+
+  const tsTypeRef = $t.factory.createTypeReferenceNode(tsTypeIdentifier, undefined);
+  const propTypeId = $t.factory.createIdentifier("PropType");
+  const propTypeRef = $t.factory.createTypeReferenceNode(propTypeId, [tsTypeRef]);
+  const asExpr = $t.factory.createAsExpression(vueTypeIdentifier, propTypeRef);
+  const propAssignment = $t.factory.createPropertyAssignment(typeId, asExpr);
+  return propAssignment;
+}
+
 export const mergeProps: ASTTransform = (astResults, options) => {
   const $t = new TsHelper(options);
   const propTags = ["Prop", "Model"];
diff --git a/tests/__snapshots__/testTSFile.spec.ts.snap b/tests/__snapshots__/testTSFile.spec.ts.snap
@@ -31,6 +31,17 @@ export default defineComponent({
     foo: { type: Boolean, default: false },
     bar: { type: Number as PropType<number>, default: 1 },
     foobar: { type: Object as PropType<CustomType> },
+    noType: {},
+    stringType: { type: String },
+    booleanType: { type: Boolean },
+    numberType: { type: Number },
+    stringLiteralType: { type: String as PropType<\\"foo\\"> },
+    numericLiteral: { type: Number as PropType<2> },
+    booleanLiteral: { type: Boolean as PropType<true> },
+    /* TODO: Too complex to determine primitive type: true | \\"false\\" */ complexType:
+      {},
+    /* TODO: Too complex to determine primitive type: string[] */ complexType2:
+      {},
   },
   name: \\"oao\\",
   setup(props, context) {
@@ -247,6 +258,17 @@ export default defineComponent({
     foo: { type: Boolean, default: false },
     bar: { type: Number as PropType<number>, default: 1 },
     foobar: { type: Object as PropType<CustomType> },
+    noType: {},
+    stringType: { type: String },
+    booleanType: { type: Boolean },
+    numberType: { type: Number },
+    stringLiteralType: { type: String as PropType<\\"foo\\"> },
+    numericLiteral: { type: Number as PropType<2> },
+    booleanLiteral: { type: Boolean as PropType<true> },
+    /* TODO: Too complex to determine primitive type: true | \\"false\\" */ complexType:
+      {},
+    /* TODO: Too complex to determine primitive type: string[] */ complexType2:
+      {},
   },
   name: \\"oao\\",
   setup(props, ctx) {
@@ -462,6 +484,17 @@ export default defineComponent({
     foo: { type: Boolean, default: false },
     bar: { type: Number as PropType<number>, default: 1 },
     foobar: { type: Object as PropType<CustomType> },
+    noType: {},
+    stringType: { type: String },
+    booleanType: { type: Boolean },
+    numberType: { type: Number },
+    stringLiteralType: { type: String as PropType<\\"foo\\"> },
+    numericLiteral: { type: Number as PropType<2> },
+    booleanLiteral: { type: Boolean as PropType<true> },
+    /* TODO: Too complex to determine primitive type: true | \\"false\\" */ complexType:
+      {},
+    /* TODO: Too complex to determine primitive type: string[] */ complexType2:
+      {},
   },
   name: \\"oao\\",
   setup(props, context) {
diff --git a/tests/fixture/Input.ts b/tests/fixture/Input.ts
@@ -26,6 +26,15 @@ export default class BasicPropertyClass extends Vue {
   @Prop({ type: Boolean, default: false }) foo!;
   @Prop({ type: Number, default: 1 }) bar: number;
   @Prop({ type: Object }) foobar: CustomType;
+  @Prop() noType: any;
+  @Prop() stringType: string;
+  @Prop() booleanType: boolean;
+  @Prop() numberType: number;
+  @Prop() stringLiteralType: "foo";
+  @Prop() numericLiteral: 2;
+  @Prop() booleanLiteral: true;
+  @Prop() complexType: true | "false";
+  @Prop() complexType2: string[];
 
   @Action() actA;
   @Action("namespace/actD") actD;
