feat(functional components): process functional single file components (#17)

Author: agualis

lib/process.js

@@ -21,9 +21,26 @@ 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)) {
+    parts.lang = 'javascript'
+    parts.script = { type: 'script', content: 'export default { props: { props: Object } }' }
+  }
+}
+
 module.exports = function (src, path) {
   var parts = vueCompiler.parseComponent(src, { pad: true })
 
+  changePartsIfFunctional(parts)
+
   const result = processScript(parts.script)
   const script = result.code
   const inputMap = result.sourceMap

test/FunctionalSFC.spec.js

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

test/resources/FunctionalSFC.vue

@@ -0,0 +1,5 @@
+<template functional>
+    <div class="hello">
+        {{ props.msg }}
+    </div>
+</template>