fix: add callback and array prop detection in functional template (#23)

* Generate appropriate prop definitions for functional SFCs

* Fix linter errors

* Add callback and array prop detection in functional template

* Fix linter errors

* Rename file to match export

* Replace function with expression

Author: agualis

lib/process-functional.js renamed to lib/extract-props.js

@@ -1,11 +1,16 @@
 module.exports = function extractProps (content) {
-  const DETECT_PROP_DEFINITIONS = /(props\..*?)(}| |\.)/g
-  const CHARS_TO_REMOVE = /(\.|}| |props)/g
+  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) => {
+  let props = propDefinitions.map((match) => {
     const propName = match.trim().replace(CHARS_TO_REMOVE, '')
     return `'${propName}'`
   })
+  props = removeDuplicates(props)
   return `[ ${props.join(', ')} ]`
 }
+
+function removeDuplicates (props) {
+  return [...new Set(props)]
+}

lib/process.js

@@ -6,7 +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 extractPropsFromFunctionalTemplate = require('./extract-props')
 
 const splitRE = /\r?\n/g
 
@@ -22,19 +22,12 @@ function processScript (scriptPart) {
   return compileBabel(scriptPart.content)
 }
 
-function isFunctionalTemplate (parts) {
-  try {
-    if (parts.template.attrs.functional === true) return true
-  } catch (error) {
-    return false
-  }
-}
-
 function changePartsIfFunctional (parts) {
-  if (isFunctionalTemplate(parts)) {
+  const isFunctional = parts.template && parts.template.attrs && parts.template.attrs.functional
+  if (isFunctional) {
     parts.lang = 'javascript'
     const functionalProps = extractPropsFromFunctionalTemplate(parts.template.content)
-    parts.template.content = parts.template.content.replace('props.', '')
+    parts.template.content = parts.template.content.replace(/props./g, '')
     parts.script = { type: 'script', content: `export default { props: ${functionalProps} }` }
   }
 }

test/FunctionalSFC.spec.js

@@ -1,10 +1,21 @@
 import { shallow } from 'vue-test-utils'
 import FunctionalSFC from './resources/FunctionalSFC.vue'
 
-test('processes .vue file with functional template', () => {
-  const wrapper = shallow(FunctionalSFC, {
-    propsData: { msg: 'Hello' }
+let wrapper
+const clickSpy = jest.fn()
+beforeEach(() => {
+  wrapper = shallow(FunctionalSFC, {
+    propsData: { msg: { id: 1, title: 'foo' }, onClick: clickSpy }
+  })
+})
+
+describe('Processes .vue file with functional template', () => {
+  it('with nested props', () => {
+    expect(wrapper.text().trim()).toBe('foo')
+  })
+
+  it('with callback prop', () => {
+    wrapper.trigger('click')
+    expect(clickSpy).toHaveBeenCalledWith(1)
   })
-  expect(wrapper.is('div')).toBe(true)
-  expect(wrapper.text().trim()).toBe('Hello')
 })

test/FunctionalSFCParent.spec.js

@@ -3,5 +3,5 @@ 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')
+  expect(wrapper.text().trim()).toBe('foo')
 })

test/extract-props.spec.js

@@ -0,0 +1,31 @@
+import extractProps from '../lib/extract-props'
+
+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' ]")
+  })
+
+  it('extracts props with nested structure', () => {
+    const content = '<div> {{props.msg1.foo }} {{props.msg1.bar}}</div>'
+
+    expect(extractProps(content)).toBe("[ 'msg1' ]")
+  })
+
+  it('extracts callback props', () => {
+    const content = '<button @click="props.onClick(props.msg)">{{props.msg.title}}</button>'
+    expect(extractProps(content)).toBe("[ 'onClick', 'msg' ]")
+  })
+
+  it('extracts array props', () => {
+    const content = '<div>{{props.msg[title]}}</div>'
+    expect(extractProps(content)).toBe("[ 'msg' ]")
+  })
+})

test/process-functional.spec.js

@@ -1,6 +1,3 @@
 <template functional>
-    <div class="hello">
-        {{ props.msg }}
-    </div>
+    <button @click="props.onClick(props.msg.id)">{{props.msg.title}}</button>
 </template>
-

test/resources/FunctionalSFC.vue

@@ -1,5 +1,5 @@
 <template>
-    <FunctionalSFC msg="TEST"/>
+    <FunctionalSFC :msg="{id: 1, title: 'foo'}" :onClick="() => {}"/>
 </template>
 
 <script>