feat: (wip) support for functional template compilation

Author: blake-newman

lib/component-normalizer.js

@@ -6,6 +6,7 @@
 module.exports = function normalizeComponent (
   rawScriptExports,
   compiledTemplate,
+  functionalTemplate,
   injectStyles,
   scopeId,
   moduleIdentifier /* server only */
@@ -29,6 +30,12 @@ module.exports = function normalizeComponent (
   if (compiledTemplate) {
     options.render = compiledTemplate.render
     options.staticRenderFns = compiledTemplate.staticRenderFns
+    options.compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
   }
 
   // scopedId
@@ -69,6 +76,7 @@ module.exports = function normalizeComponent (
     var existing = functional
       ? options.render
       : options.beforeCreate
+
     if (!functional) {
       // inject component registration as beforeCreate hook
       options.beforeCreate = existing

lib/loader.js

@@ -90,14 +90,18 @@ module.exports = function (content) {
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
   var hasComment = parts.template && parts.template.attrs && parts.template.attrs.comments
+  var functional = parts.template && parts.template.functional
+  var bubleTemplateOptions = Object.create(options.buble || {})
+  bubleTemplateOptions.transforms = Object.create(bubleTemplateOptions.transforms || {})
+  bubleTemplateOptions.transforms.stripWithFunctional = functional
 
   var templateCompilerOptions = '?' + JSON.stringify({
     id: moduleId,
     hasScoped: hasScoped,
     hasComment: hasComment,
     transformToRequire: options.transformToRequire,
     preserveWhitespace: options.preserveWhitespace,
-    buble: options.buble,
+    buble: bubleTemplateOptions,
     // only pass compilerModules if it's a path string
     compilerModules: typeof options.compilerModules === 'string'
       ? options.compilerModules
@@ -261,6 +265,10 @@ module.exports = function (content) {
     output += 'var __vue_template__ = null\n'
   }
 
+  // template functional
+  output += '/* template functional */\n  '
+  output += 'var __vue_template_functional__ = ' + ((template && template.functional) ? 'true' : 'null') + '\n'
+
   // style
   output += '/* styles */\n'
   output += 'var __vue_styles__ = ' + (parts.styles.length ? 'injectStyle' : 'null') + '\n'
@@ -277,6 +285,7 @@ module.exports = function (content) {
   output += 'var Component = normalizeComponent(\n' +
     '  __vue_script__,\n' +
     '  __vue_template__,\n' +
+    '  __vue_template_functional__,\n' +
     '  __vue_styles__,\n' +
     '  __vue_scopeId__,\n' +
     '  __vue_module_identifier__\n' +
@@ -293,15 +302,6 @@ module.exports = function (content) {
       '})) {' +
         'console.error("named exports are not supported in *.vue files.")' +
       '}\n'
-    // check functional components used with templates
-    if (template) {
-      output +=
-        'if (Component.options.functional) {' +
-          'console.error("' +
-          '[vue-loader] ' + fileName + ': functional components are not ' +
-          'supported with templates, they should use render functions.' +
-        '")}\n'
-    }
   }
 
   // add requires for customBlocks

lib/template-compiler/index.js

@@ -52,9 +52,14 @@ module.exports = function (html) {
       : 'module.exports={render:function(){},staticRenderFns:[]}'
   } else {
     var bubleOptions = options.buble
+    var stripWithFunctional = bubleOptions.transforms.stripWithFunctional
+    var stripWith = bubleOptions.transforms.stripWith !== false
+
+    var staticRenderFns = compiled.staticRenderFns.map((fn) => toFunction(fn, stripWithFunctional))
+
     code = transpile(
-      'var render = ' + toFunction(compiled.render) + '\n' +
-      'var staticRenderFns = [' + compiled.staticRenderFns.map(toFunction).join(',') + ']',
+      'var render = ' + toFunction(compiled.render, stripWithFunctional) + '\n' +
+      'var staticRenderFns = [' + staticRenderFns.join(',') + ']',
       bubleOptions
     ) + '\n'
 
@@ -64,11 +69,7 @@ module.exports = function (html) {
     }
 
     // mark with stripped (this enables Vue to use correct runtime proxy detection)
-    if (!isProduction && (
-      !bubleOptions ||
-      !bubleOptions.transforms ||
-      bubleOptions.transforms.stripWith !== false
-    )) {
+    if (!isProduction && stripWith) {
       code += `render._withStripped = true\n`
     }
     var exports = `{ render: render, staticRenderFns: staticRenderFns }`
@@ -91,8 +92,8 @@ module.exports = function (html) {
   return code
 }
 
-function toFunction (code) {
-  return 'function () {' + code + '}'
+function toFunction (code, stripWithFunctional) {
+  return 'function (' + (stripWithFunctional ? '_h,_vm' : '') + ') {' + code + '}'
 }
 
 function pad (html) {

test/fixtures/functional-root.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <functional>
+      <span>hello</span>
+      <div slot="slot2">Second slot</div>
+      <template slot="scoped" scope="scope">{{ scope.msg }}</template>
+    </functional>
+  </div>
+</template>
+
+<script>
+import Functional from './functional.vue'
+export default {
+  components: {
+    Functional
+  }
+}
+</script>

test/fixtures/functional.vue

@@ -0,0 +1,22 @@
+<template functional>
+  <div>
+    <h2 class="red">{{ props.msg }}</h2>
+    <slot></slot>
+    <slot name="slot2"></slot>
+    <slot :msg="props.msg" name="scoped"></slot>
+    <div>Some <span>text</span></div>
+    <div v-if="false">Not exist</div>
+    <div class="clickable" @click="parent.fn"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    msg: {
+      type: String,
+      default: 'hello'
+    }
+  }
+}
+</script>

test/test.js

@@ -8,6 +8,7 @@ var MemoryFS = require('memory-fs')
 var expect = require('chai').expect
 var hash = require('hash-sum')
 var SSR = require('vue-server-renderer')
+var Vue = require('vue/dist/vue.runtime.js')
 // var compiler = require('../lib/template-compiler')
 var normalizeNewline = require('normalize-newline')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
@@ -86,38 +87,10 @@ function test (options, assert) {
   })
 }
 
-function mockRender (options, data) {
-  function h (tag, data, children) {
-    if (Array.isArray(data)) {
-      children = data
-      data = null
-    }
-    return {
-      tag: tag,
-      data: data,
-      children: children
-    }
-  }
-  function e (text = '') {
-    return {
-      text: text,
-      isComment: true
-    }
-  }
-  return options.render.call(Object.assign({
-    _v (val) {
-      return val
-    },
-    _self: {},
-    _e: e,
-    $createElement: h,
-    _m (index) {
-      return options.staticRenderFns[index].call(this)
-    },
-    _s (str) {
-      return String(str)
-    }
-  }, data), h)
+function mockRender (options, data = {}) {
+  const vm = new Vue(Object.assign({}, options, { data () { return data } }))
+  vm.$mount()
+  return vm._vnode
 }
 
 function interopDefault (module) {
@@ -134,10 +107,11 @@ describe('vue-loader', function () {
       var vnode = mockRender(module, {
         msg: 'hi'
       })
+
       // <h2 class="red">{{msg}}</h2>
       expect(vnode.tag).to.equal('h2')
       expect(vnode.data.staticClass).to.equal('red')
-      expect(vnode.children[0]).to.equal('hi')
+      expect(vnode.children[0].text).to.equal('hi')
 
       expect(module.data().msg).to.contain('Hello from Component A!')
       var style = window.document.querySelector('style').textContent
@@ -222,11 +196,11 @@ describe('vue-loader', function () {
       //   <svg><template><p></p></template></svg>
       // </div>
       expect(vnode.children[0].tag).to.equal('div')
-      expect(vnode.children[1]).to.equal(' ')
+      expect(vnode.children[1].text).to.equal(' ')
       expect(vnode.children[2].tag).to.equal('p')
       expect(vnode.children[2].data.staticClass).to.equal('abc def')
-      expect(vnode.children[4][0].tag).to.equal('p')
-      expect(vnode.children[4][0].data.staticClass).to.equal('test')
+      expect(vnode.children[4].tag).to.equal('p')
+      expect(vnode.children[4].data.staticClass).to.equal('test')
 
       var style = window.document.querySelector('style').textContent
       style = normalizeNewline(style)
@@ -264,7 +238,7 @@ describe('vue-loader', function () {
       var vnode = mockRender(module)
       // '<div><h1>hello</h1></div>'
       expect(vnode.children[0].tag).to.equal('h1')
-      expect(vnode.children[0].children[0]).to.equal('hello')
+      expect(vnode.children[0].children[0].text).to.equal('hello')
       done()
     })
   })
@@ -401,7 +375,7 @@ describe('vue-loader', function () {
       // <div class="msg">{{ msg }}</div>
       expect(vnode.tag).to.equal('div')
       expect(vnode.data.staticClass).to.equal('msg')
-      expect(vnode.children[0]).to.equal('Hello from mocked service!')
+      expect(vnode.children[0].text).to.equal('Hello from mocked service!')
       done()
     })
   })
@@ -522,7 +496,7 @@ describe('vue-loader', function () {
         msg: 'success'
       })
       expect(vnode.tag).to.equal('div')
-      expect(vnode.children[0]).to.equal('success')
+      expect(vnode.children[0].text).to.equal('success')
       expect(new Module().msg === 'success')
       done()
     })
@@ -541,7 +515,7 @@ describe('vue-loader', function () {
       })
       expect(vnode.tag).to.equal('h2')
       expect(vnode.data.staticClass).to.equal('red')
-      expect(vnode.children[0]).to.equal('hi')
+      expect(vnode.children[0].text).to.equal('hi')
 
       expect(rawModule.default.data().msg).to.contain('Hello from Component A!')
       done()
@@ -635,7 +609,7 @@ describe('vue-loader', function () {
       // <h2 id="-msg-">{{msg}}</h2>
       expect(vnode.tag).to.equal('h2')
       expect(vnode.data.attrs.id).to.equal('-msg-')
-      expect(vnode.children[0]).to.equal('hi')
+      expect(vnode.children[0].text).to.equal('hi')
       done()
     })
   })
@@ -816,7 +790,7 @@ describe('vue-loader', function () {
       // <h2 class="green">{{msg}}</h2>
       expect(vnode.tag).to.equal('h2')
       expect(vnode.data.staticClass).to.equal('green')
-      expect(vnode.children[0]).to.equal('hi')
+      expect(vnode.children[0].text).to.equal('hi')
 
       expect(module.data().msg).to.contain('Changed!')
       var style = window.document.querySelector('style').textContent
@@ -846,7 +820,7 @@ describe('vue-loader', function () {
         msg: JSON.parse(module.__i18n).en.hello,
         blog: module.__blog
       })
-      expect(vnode.children[0].children[0]).to.equal('hello world')
+      expect(vnode.children[0].children[0].text).to.equal('hello world')
       expect(vnode.children[2].data.domProps.innerHTML).to.equal('<h2 id="foo">foo</h2>')
       done()
     })
@@ -872,10 +846,10 @@ describe('vue-loader', function () {
     }, (window, module) => {
       var results = []
       // var vnode =
-      mockRender(module, {
-        $processStyle: style => results.push(style),
-        transform: 'translateX(10px)'
-      })
+      mockRender(
+        Object.assign(module, { methods: { $processStyle: style => results.push(style) }}),
+        { transform: 'translateX(10px)' }
+      )
       expect(results).to.deep.equal([
         { 'flex-direction': 'row' },
         { 'transform': 'translateX(10px)' }
@@ -931,7 +905,7 @@ describe('vue-loader', function () {
       // <div class="foo">hi</div>
       expect(vnode.tag).to.equal('div')
       expect(vnode.data.class).to.equal('foo')
-      expect(vnode.children[0]).to.equal('functional')
+      expect(vnode.children[0].text).to.equal('functional')
 
       var style = window.document.querySelector('style').textContent
       style = normalizeNewline(style)
@@ -951,10 +925,52 @@ describe('vue-loader', function () {
       expect(vnode.tag).to.equal('div')
       expect(vnode.children.length).to.equal(2)
       expect(vnode.children[0].data.staticClass).to.equal('red')
-      expect(vnode.children[0].children[0]).to.equal('hi')
+      expect(vnode.children[0].children[0].text).to.equal('hi')
       expect(vnode.children[1].isComment).to.true
       expect(vnode.children[1].text).to.equal(' comment here ')
       done()
     })
   })
+
+  // Vue required tests for more complete test cases
+  it('should allow functional template', done => {
+    test({
+      entry: './test/fixtures/functional-root.vue',
+      vue: {
+        preserveWhitespace: false
+      }
+    }, (window, module) => {
+      expect(module.components.Functional.compiled).to.equal(true)
+      expect(module.components.Functional.functional).to.equal(true)
+      expect(module.components.Functional.staticRenderFns).to.exist
+      expect(module.components.Functional.render).to.be.a('function')
+
+      const vnode = mockRender(module, {
+        fn () {
+          done()
+        }
+      }).children[0]
+
+      // Basic vnode
+      expect(vnode.children[0].data.staticClass).to.equal('red')
+      expect(vnode.children[0].children[0].text).to.equal('hello')
+      // Default slot vnode
+      expect(vnode.children[1].tag).to.equal('span')
+      expect(vnode.children[1].children[0].text).to.equal('hello')
+      // Named slot vnode
+      expect(vnode.children[2].tag).to.equal('div')
+      expect(vnode.children[2].children[0].text).to.equal('Second slot')
+      // // Scoped slot vnode
+      expect(vnode.children[3].text).to.equal('hello')
+      // // Static content vnode
+      expect(vnode.children[4].tag).to.equal('div')
+      expect(vnode.children[4].children[0].text).to.equal('Some ')
+      expect(vnode.children[4].children[1].tag).to.equal('span')
+      expect(vnode.children[4].children[1].children[0].text).to.equal('text')
+      // // v-if vnode
+      expect(vnode.children[5].text).to.equal('')
+
+      vnode.children[6].data.on.click()
+    })
+  })
 })