fix: props definition priority is script then template (#93)

Author: elevatebart

src/parse.ts

@@ -48,6 +48,11 @@ export function parseSource(documentation: Documentation, source: string, opt: P
     parts = cacher(() => parseComponent(source), source)
   }
 
+  // get slots and props from template
+  if (parts && parts.template) {
+    parseTemplate(parts.template, documentation, templateHandlers, opt.filePath)
+  }
+
   const scriptSource = parts ? (parts.script ? parts.script.content : undefined) : source
   if (scriptSource) {
     opt.lang =
@@ -59,11 +64,6 @@ export function parseSource(documentation: Documentation, source: string, opt: P
     parseScript(scriptSource, documentation, handlers, opt)
   }
 
-  // get slots from template
-  if (parts && parts.template) {
-    parseTemplate(parts.template, documentation, templateHandlers, opt.filePath)
-  }
-
   if (!documentation.get('displayName')) {
     // a component should always have a display name
     documentation.set('displayName', path.basename(opt.filePath).replace(/\.\w+$/, ''))

src/template-handlers/__tests__/propHandler.ts

@@ -21,7 +21,7 @@ describe('slotHandler', () => {
     ).ast
     if (ast) {
       traverse(ast, doc, [propHandler], { functional: true })
-      expect(doc.toObject().props).toMatchObject({ size: { type: { name: 'string' } } })
+      expect(doc.toObject().props).toMatchObject({ size: { type: { name: 'undefined' } } })
     } else {
       fail()
     }
@@ -41,13 +41,13 @@ describe('slotHandler', () => {
     ).ast
     if (ast) {
       traverse(ast, doc, [propHandler], { functional: true })
-      expect(doc.toObject().props).toMatchObject({ name: { type: { name: 'string' } } })
+      expect(doc.toObject().props).toMatchObject({ name: { type: { name: 'undefined' } } })
     } else {
       fail()
     }
   })
 
-  it('should not match props if in a litteral', () => {
+  it('should not match props if in a string litteral', () => {
     const ast = compile(
       [
         '<div>',
@@ -64,4 +64,22 @@ describe('slotHandler', () => {
       fail()
     }
   })
+
+  it('should not match props if in a non evaluated attribute', () => {
+    const ast = compile(
+      [
+        '<div>',
+        '  <h1>titleof the template</h1>',
+        '  <button style="width:props.size"></slot>',
+        '</div>',
+      ].join('\n'),
+      { comments: true },
+    ).ast
+    if (ast) {
+      traverse(ast, doc, [propHandler], { functional: true })
+      expect(doc.toObject().props).toBeUndefined()
+    } else {
+      fail()
+    }
+  })
 })

src/template-handlers/propHandler.ts

@@ -57,7 +57,7 @@ function getPropsFromExpression(expression: string, documentation: Documentation
       ) {
         const pName = propName.name
         const p = documentation.getPropDescriptor(pName)
-        p.type = { name: 'string' }
+        p.type = { name: 'undefined' }
       }
       return false
     },

tests/components/button-functinoal/MyButton.vue

@@ -7,3 +7,12 @@
     {{props.text}}
   </div>
 </template>
+
+<script>
+export default {
+  props: {
+    size: Number,
+    default: 200,
+  },
+}
+</script>

tests/components/button-functinoal/__snapshots__/button-functional.test.ts.snap

@@ -7,18 +7,26 @@ Object {
   "events": Object {},
   "methods": Array [],
   "props": Object {
+    "default": Object {
+      "description": "",
+      "tags": Object {},
+      "type": Object {
+        "func": true,
+        "name": "200",
+      },
+    },
     "size": Object {
       "description": "",
       "tags": Object {},
       "type": Object {
-        "name": "string",
+        "name": "number",
       },
     },
     "text": Object {
       "description": "",
       "tags": Object {},
       "type": Object {
-        "name": "string",
+        "name": "undefined",
       },
     },
   },

tests/components/button-functinoal/button-functional.test.ts

@@ -21,8 +21,8 @@ describe('tests button functional', () => {
 
   it('should extract props from template if functional', () => {
     expect(docButton.props).toMatchObject({
-      size: { type: { name: 'string' } },
-      text: { type: { name: 'string' } },
+      size: { type: { name: 'number' } },
+      text: { type: { name: 'undefined' } },
     })
   })