fix: generate appropriate prop definitions for functional SFCs (#22)

* Generate appropriate prop definitions for functional SFCs

* Fix linter errors

Author: agualis

lib/process-functional.js

@@ -0,0 +1,11 @@
+module.exports = function extractProps (content) {
+  const DETECT_PROP_DEFINITIONS = /(props\..*?)(}| |\.)/g
+  const CHARS_TO_REMOVE = /(\.|}| |props)/g
+  const propDefinitions = content.match(DETECT_PROP_DEFINITIONS)
+  if (!propDefinitions) return '{}'
+  const props = propDefinitions.map((match) => {
+    const propName = match.trim().replace(CHARS_TO_REMOVE, '')
+    return `'${propName}'`
+  })
+  return `[ ${props.join(', ')} ]`
+}

lib/process.js

@@ -6,6 +6,7 @@ const addTemplateMapping = require('./add-template-mapping')
 const compileBabel = require('./compilers/babel-compiler')
 const compileTypescript = require('./compilers/typescript-compiler')
 const compileCoffeeScript = require('./compilers/coffee-compiler')
+const extractPropsFromFunctionalTemplate = require('./process-functional')
 
 const splitRE = /\r?\n/g
 
@@ -32,7 +33,9 @@ function isFunctionalTemplate (parts) {
 function changePartsIfFunctional (parts) {
   if (isFunctionalTemplate(parts)) {
     parts.lang = 'javascript'
-    parts.script = { type: 'script', content: 'export default { props: { props: Object } }' }
+    const functionalProps = extractPropsFromFunctionalTemplate(parts.template.content)
+    parts.template.content = parts.template.content.replace('props.', '')
+    parts.script = { type: 'script', content: `export default { props: ${functionalProps} }` }
   }
 }
 

test/FunctionalSFC.spec.js

@@ -3,7 +3,7 @@ import FunctionalSFC from './resources/FunctionalSFC.vue'
 
 test('processes .vue file with functional template', () => {
   const wrapper = shallow(FunctionalSFC, {
-    propsData: { props: { msg: 'Hello' }}
+    propsData: { msg: 'Hello' }
   })
   expect(wrapper.is('div')).toBe(true)
   expect(wrapper.text().trim()).toBe('Hello')

test/FunctionalSFCParent.spec.js

@@ -0,0 +1,7 @@
+import { mount } from 'vue-test-utils'
+import FunctionalSFCParent from './resources/FunctionalSFCParent.vue'
+
+test('processes .vue file with functional template from parent', () => {
+  const wrapper = mount(FunctionalSFCParent)
+  expect(wrapper.text().trim()).toBe('TEST')
+})

test/process-functional.spec.js

@@ -0,0 +1,15 @@
+import extractProps from '../lib/process-functional'
+
+describe('when extracting props with props. prefix from functional template content', () => {
+  it('extracts interpolated props ', () => {
+    const content = '<div> {{props.msg1 }} {{props.msg2}}</div>'
+
+    expect(extractProps(content)).toBe("[ 'msg1', 'msg2' ]")
+  })
+
+  it('extracts props used in v-for', () => {
+    const content = '<div v-for="bar in props.foo.bar"> {{ bar }}} </div>'
+
+    expect(extractProps(content)).toBe("[ 'foo' ]")
+  })
+})

test/resources/FunctionalSFC.vue

@@ -3,3 +3,4 @@
         {{ props.msg }}
     </div>
 </template>
+

test/resources/FunctionalSFCParent.vue

@@ -0,0 +1,14 @@
+<template>
+    <FunctionalSFC msg="TEST"/>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import FunctionalSFC from './FunctionalSFC'
+
+  Vue.component('FunctionalSFC', FunctionalSFC)
+
+  export default {
+    components: FunctionalSFC
+  }
+</script>