Merge pull request #4 from jaredmcateer/propkeys

Author: jaredmcateer

README.md

@@ -29,6 +29,7 @@ The files to be converted must meet the criteria below:
   - Object
     - [x] `name`
     - [x] `props`
+      - [x] `PropType<...>`
     - [x] `data`
     - [ ] `computed`
     - [ ] `methods`

src/plugins/vue-property-decorator/Prop.ts

@@ -1,5 +1,5 @@
 import { ASTConverter, ASTResultKind, ASTTransform, ASTResultToObject, ReferenceKind } from '../types'
-import type ts from 'typescript'
+import ts from 'typescript'
 import { copySyntheticComments } from '../../utils'
 
 const propDecoratorName = 'Prop'
@@ -10,24 +10,48 @@ export const convertProp: ASTConverter<ts.PropertyDeclaration> = (node, options)
   }
   const decorator = node.decorators.find((el) => (el.expression as ts.CallExpression).expression.getText() === propDecoratorName)
   if (decorator) {
+    const propType = 'PropType'
     const tsModule = options.typescript
+    const type = node.type?.kind
     const decoratorArguments = (decorator.expression as ts.CallExpression).arguments
-    if (decoratorArguments.length > 0) {
+    const hasKnowableType = type !== undefined && type !== ts.SyntaxKind.AnyKeyword && type !== ts.SyntaxKind.UndefinedKeyword && type !== ts.SyntaxKind.UnknownKeyword
+    let addedPropKey = false
+
+    if (decoratorArguments.length > 0 || hasKnowableType) {
       const propName = node.name.getText()
-      const propArguments = decoratorArguments[0]
+      const propArguments = decoratorArguments[0] as ts.ObjectLiteralExpression
+      const props = propArguments.properties
+        .reduce((accumulator, property) => {
+          if (property.kind === ts.SyntaxKind.PropertyAssignment) {
+            if (node.type && property.name.getText() === 'type') {
+              const typeReference = ts.createTypeReferenceNode(propType, [node.type])
+              property.initializer = tsModule.createAsExpression(property.initializer, typeReference)
+              addedPropKey = true
+            }
+
+            accumulator.push(property)
+          }
+
+          return accumulator
+        }, [] as ts.ObjectLiteralElementLike[])
+
+      const args = tsModule.createObjectLiteral(props)
 
       return {
         tag: 'Prop',
-        kind: ASTResultKind.OBJECT,
-        imports: [],
+        kind: ASTResultKind.COMPOSITION,
+        imports: addedPropKey ? [{
+          named: [propType],
+          external: (options.compatible) ? '@vue/composition-api' : 'vue'
+        }] : [],
         reference: ReferenceKind.PROPS,
         attributes: [propName],
         nodes: [
           copySyntheticComments(
             tsModule,
             tsModule.createPropertyAssignment(
               tsModule.createIdentifier(propName),
-              propArguments
+              args
             ),
             node
           )
@@ -38,18 +62,20 @@ export const convertProp: ASTConverter<ts.PropertyDeclaration> = (node, options)
 
   return false
 }
+
 export const mergeProps: ASTTransform = (astResults, options) => {
   const tsModule = options.typescript
   const propTags = ['Prop', 'Model']
 
   const propASTResults = astResults.filter((el) => propTags.includes(el.tag))
   const otherASTResults = astResults.filter((el) => !propTags.includes(el.tag))
   const modelASTResult = astResults.find((el) => el.tag === 'Model')
+  const imports = propASTResults.find(el => el.imports.length > 0)?.imports || []
 
   const mergeASTResult: ASTResultToObject = {
     tag: 'Prop',
     kind: ASTResultKind.OBJECT,
-    imports: [],
+    imports,
     reference: ReferenceKind.PROPS,
     attributes: propASTResults.map((el) => el.attributes).reduce((array, el) => array.concat(el), []),
     nodes: [

tests/__snapshots__/testTSFile.spec.ts.snap

@@ -3,6 +3,7 @@
 exports[`testTSFile compatible 1`] = `
 "import {
   computed,
+  PropType,
   reactive,
   toRefs,
   ref,
@@ -27,7 +28,9 @@ export default defineComponent({
     /**
      * My foo
      */
-    foo: { type: Number, default: false }
+    foo: { type: Boolean, default: false },
+    bar: { type: Number as PropType<number>, default: 1 },
+    foobar: { type: Object as PropType<CustomType> }
   },
   name: 'oao',
   setup(props, context) {
@@ -156,6 +159,7 @@ exports[`testTSFile compatible and ts config file: stderr 1`] = `""`;
 exports[`testTSFile compatible and ts config file: stdout 1`] = `
 "import {
   computed,
+  PropType,
   reactive,
   toRefs,
   ref,
@@ -180,7 +184,9 @@ export default defineComponent({
     /**
      * My foo
      */
-    foo: { type: Number, default: false }
+    foo: { type: Boolean, default: false },
+    bar: { type: Number as PropType<number>, default: 1 },
+    foobar: { type: Object as PropType<CustomType> }
   },
   name: 'oao',
   setup(props, ctx) {
@@ -308,6 +314,7 @@ export default defineComponent({
 exports[`testTSFile no compatible 1`] = `
 "import {
   computed,
+  PropType,
   reactive,
   toRefs,
   ref,
@@ -331,7 +338,9 @@ export default {
     /**
      * My foo
      */
-    foo: { type: Number, default: false }
+    foo: { type: Boolean, default: false },
+    bar: { type: Number as PropType<number>, default: 1 },
+    foobar: { type: Object as PropType<CustomType> }
   },
   name: 'oao',
   setup(props, context) {

tests/__snapshots__/testVueFile.spec.ts.snap

@@ -4,6 +4,7 @@ exports[`testVueFile compatible 1`] = `
 "import MyComponent from 'my-component.vue'
 import {
   computed,
+  PropType,
   reactive,
   toRefs,
   ref,
@@ -32,7 +33,9 @@ export default defineComponent({
     /**
      * My foo
      */
-    foo: { type: Boolean, default: false }
+    foo: { type: Boolean, default: false },
+    bar: { type: Number as PropType<number>, default: 1 },
+    foobar: { type: Object as PropType<CustomType> }
   },
   name: 'oao',
   setup(props, context) {
@@ -131,6 +134,7 @@ exports[`testVueFile no compatible 1`] = `
 "import MyComponent from 'my-component.vue'
 import {
   computed,
+  PropType,
   reactive,
   toRefs,
   ref,
@@ -158,7 +162,9 @@ export default {
     /**
      * My foo
      */
-    foo: { type: Boolean, default: false }
+    foo: { type: Boolean, default: false },
+    bar: { type: Number as PropType<number>, default: 1 },
+    foobar: { type: Object as PropType<CustomType> }
   },
   name: 'oao',
   setup(props, context) {

tests/fixture/Input.ts

@@ -22,7 +22,9 @@ export default class BasicPropertyClass extends Vue {
   /**
    * My foo
    */
-  @Prop({ type: Number, default: false }) foo!: number
+  @Prop({ type: Boolean, default: false }) foo!
+  @Prop({ type: Number, default: 1 }) bar: number
+  @Prop({ type: Object }) foobar: CustomType
 
   $refs!: {
     myDiv: HTMLDivElement

tests/fixture/Input.vue

@@ -30,7 +30,9 @@ export default class BasicPropertyClass extends Vue {
   /**
    * My foo
    */
-  @Prop({ type: Boolean, default: false }) foo: any
+  @Prop({ type: Boolean, default: false }) foo!
+  @Prop({ type: Number, default: 1 }) bar: number
+  @Prop({ type: Object }) foobar: CustomType
 
   @Provide() foa = 'foo'
   @Provide('bar') baz = 'bar'