fix: process functional component

Author: tran2

lib/extract-props.js

@@ -5,7 +5,6 @@ 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('./extract-props')
 const processStyle = require('./process-style')
 const getVueJestConfig = require('./get-vue-jest-config')
 const fs = require('fs')
@@ -30,23 +29,11 @@ function processScript (scriptPart, vueJestConfig) {
   return compileBabel(scriptPart.content, undefined, undefined, vueJestConfig)
 }
 
-function changePartsIfFunctional (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./g, '')
-    parts.script = { type: 'script', content: `export default { props: ${functionalProps} }` }
-  }
-}
-
 module.exports = function (src, filePath, jestConfig) {
   const vueJestConfig = getVueJestConfig(jestConfig)
 
   var parts = vueCompiler.parseComponent(src, { pad: true })
 
-  changePartsIfFunctional(parts)
-
   if (parts.script && parts.script.src) {
     parts.script.content = fs.readFileSync(join(filePath, '..', parts.script.src), 'utf8')
   }
@@ -78,7 +65,11 @@ module.exports = function (src, filePath, jestConfig) {
     const renderFunctions = compileTemplate(parts.template, vueJestConfig)
 
     output += '__vue__options__.render = ' + renderFunctions.render + '\n' +
-      '__vue__options__.staticRenderFns = ' + renderFunctions.staticRenderFns + '\n'
+      '__vue__options__.staticRenderFns = ' + renderFunctions.staticRenderFns + '\n';
+
+    if (parts.template.attrs.functional) {
+      output += '__vue__options__.functional = true\n';
+    }
 
     if (map) {
       const beforeLines = output.split(splitRE).length

lib/process.js

@@ -21,21 +21,28 @@ function getTemplateContent (templatePart, config) {
 
 module.exports = function compileTemplate (templatePart, config) {
   var templateContent = getTemplateContent(templatePart, config)
-
   var compiled = vueCompiler.compile(templateContent)
   if (compiled.errors.length) {
     compiled.errors.forEach(function (msg) {
       console.error('\n' + chalk.red(msg) + '\n')
     })
     throwError('Vue template compilation failed')
   } else {
-    return {
-      render: toFunction(compiled.render),
-      staticRenderFns: '[' + compiled.staticRenderFns.map(toFunction).join(',') + ']'
-    }
+    return compile(compiled, templatePart.attrs.functional)
   }
 }
 
-function toFunction (code) {
-  return transpile('function render () {' + code + '}')
+function compile (compiled, isFunctional) {
+
+  function toFunction (code) {
+    var renderArgs = isFunctional ? '_h, _vm' : ''
+    return transpile('function render (' + renderArgs + ') {' + code + '}', {
+      transforms: { stripWithFunctional: isFunctional }
+    })
+  }
+
+  return {
+    render: toFunction(compiled.render),
+    staticRenderFns: '[' + compiled.staticRenderFns.map(toFunction).join(',') + ']'
+  }
 }

lib/template-compiler.js

@@ -67,7 +67,7 @@
     "object-assign": "^4.1.1",
     "source-map": "^0.5.6",
     "tsconfig": "^7.0.0",
-    "vue-template-es2015-compiler": "^1.5.3"
+    "vue-template-es2015-compiler": "^1.6.0"
   },
   "jest": {
     "moduleFileExtensions": [

package.json

@@ -1,15 +1,17 @@
 import { shallow } from 'vue-test-utils'
 import FunctionalSFC from './resources/FunctionalSFC.vue'
 
-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', () => {
+  let wrapper
+  const clickSpy = jest.fn()
+  beforeEach(() => {
+    wrapper = shallow(FunctionalSFC, {
+      context: {
+        props: { msg: { id: 1, title: 'foo' }, onClick: clickSpy }
+      }
+    })
   })
-})
 
-describe('Processes .vue file with functional template', () => {
   it('with nested props', () => {
     expect(wrapper.text().trim()).toBe('foo')
   })
@@ -18,4 +20,9 @@ describe('Processes .vue file with functional template', () => {
     wrapper.trigger('click')
     expect(clickSpy).toHaveBeenCalledWith(1)
   })
-})
+
+  it('is functional', () => {
+    // note: for new version of @vue/vue-utils we can use wrapper.isFunctionalComponent for this
+    expect(wrapper.vm._vnode.fnOptions.functional).toBe(true)
+  })
+})

test/FunctionalSFC.spec.js

@@ -4235,7 +4235,7 @@ vue-template-compiler@^2.4.2:
     de-indent "^1.0.2"
     he "^1.1.0"
 
-vue-template-es2015-compiler@^1.5.3:
+vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"