support functional templates

blake-newman · blake-newman · commit 8cd2d0b345c3 · 2017-02-03T14:23:19.000Z
diff --git a/lib/component-normalizer.js b/lib/component-normalizer.js
@@ -1,6 +1,7 @@
 module.exports = function normalizeComponent (
   rawScriptExports,
   compiledTemplate,
+  functionalTemplate,
   scopeId,
   cssModules
 ) {
@@ -23,6 +24,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
diff --git a/lib/loader.js b/lib/loader.js
@@ -162,6 +162,10 @@ module.exports = function (content) {
       if (type === 'template' && loader !== defaultLoaders.html) {
         loader = defaultLoaders.html + '!' + loader
       }
+      // if template is functional add functional to loader sting
+      if (type === 'template' && loader === defaultLoaders.html) {
+        loader += '&functional=' + part.functional
+      }
       // inject rewriter before css/html loader for
       // extractTextPlugin use cases
       if (rewriterInjectRE.test(loader)) {
@@ -176,7 +180,8 @@ module.exports = function (content) {
       // unknown lang, infer the loader to be used
       switch (type) {
         case 'template':
-          return defaultLoaders.html + '!' + templateLoaderPath + '?raw&engine=' + lang + '!'
+          const options = '?raw&engine=' + lang + '&functional=' + !!part.functional + '!'
+          return defaultLoaders.html + '!' + templateLoaderPath + options
         case 'styles':
           loader = addCssModulesToLoader(defaultLoaders.css, part, index)
           return loader + '!' + rewriter + ensureBang(ensureLoader(lang))
@@ -296,6 +301,7 @@ module.exports = function (content) {
   // normalizeComponent(
   //   scriptExports,
   //   compiledTemplate,
+  //   functionalTemplate,
   //   scopeId,
   //   cssModules
   // )
@@ -331,6 +337,11 @@ module.exports = function (content) {
   }
   output += ',\n'
 
+  // <template functional>
+  output += '  /* template functional */\n  '
+  output += template && template.functional ? 'true' : 'null'
+  output += ',\n'
+
   // scopeId
   output += '  /* scopeId */\n  '
   output += (hasScoped ? JSON.stringify(moduleId) : 'null') + ',\n'
@@ -359,15 +370,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'
-    }
   }
 
   if (!query.inject) {
diff --git a/lib/template-compiler.js b/lib/template-compiler.js
@@ -70,11 +70,18 @@ module.exports = function (html) {
     })
     code = 'module.exports={render:function(){},staticRenderFns:[]}'
   } else {
-    var bubleOptions = vueOptions.buble
+    var bubleOptions = Object.assign({}, vueOptions.buble || {})
+    bubleOptions.transforms = Object.assign({}, bubleOptions.transforms || {}, {
+      stripWithFunctional: query.functional
+    })
+    var staticRenderFns = compiled.staticRenderFns.map((fn) => {
+      return toFunction(fn, query.functional)
+    })
     code = transpile('module.exports={' +
-      'render:' + toFunction(compiled.render) + ',' +
-      'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
+      'render:' + toFunction(compiled.render, query.functional) + ',' +
+      'staticRenderFns: [' + staticRenderFns.join(',') + ']' +
     '}', bubleOptions)
+
     // mark with stripped (this enables Vue to use correct runtime proxy detection)
     if (!isProduction && (
       !bubleOptions ||
@@ -99,8 +106,8 @@ module.exports = function (html) {
   return code
 }
 
-function toFunction (code) {
-  return 'function (){' + beautify(code, {
+function toFunction (code, functional) {
+  return 'function (_h' + functional ? ',_vm' : '' + '){' + beautify(code, {
     indent_size: 2 // eslint-disable-line camelcase
   }) + '}'
 }
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "stylus-loader": "^2.0.0",
     "sugarss": "^0.2.0",
     "url-loader": "^0.5.7",
-    "vue": "^2.1.0",
+    "vue": "2.1.10",
     "vue-server-renderer": "^2.1.10",
     "vue-template-compiler": "^2.1.0",
     "webpack": "^2.2.0"
diff --git a/test/fixtures/functional.vue b/test/fixtures/functional.vue
@@ -0,0 +1,27 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    msg: {
+      type: String,
+      default: 'hello'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
diff --git a/test/test.js b/test/test.js
@@ -5,6 +5,7 @@ var jsdom = require('jsdom')
 var webpack = require('webpack')
 var MemoryFS = require('memory-fs')
 var expect = require('chai').expect
+var Vue = require('vue')
 var genId = require('../lib/gen-id')
 var SSR = require('vue-server-renderer')
 var compiler = require('../lib/template-compiler')
@@ -689,4 +690,66 @@ describe('vue-loader', function () {
       done()
     })
   })
+
+  // Vue required tests for more complete test cases
+  it('should allow functional template', done => {
+    test({
+      entry: './test/fixtures/functional.vue',
+      vue: {
+        preserveWhitespace: false
+      }
+    }, (window, module) => {
+      const vm = new Vue({
+        render (h) {
+          const _vm = this
+          return _vm._c(
+            module,
+            {
+              scopedSlots: {
+                scoped: function (props) {
+                  return [_vm._v(_vm._s(props.msg))]
+                }
+              }
+            },
+            [
+              _vm._c('div', [_vm._v('Default slot')]),
+              _vm._c('p', { slot: 'slot2' }, [_vm._v('Second slot')])
+            ]
+          )
+        }
+      }).$mount()
+
+      expect(module.compiled).to.equal(true)
+      expect(module.functional).to.equal(true)
+      expect(module.staticRenderFns).to.exist
+      expect(module.render).to.be.a('function')
+
+
+      // Mount results
+      const vnode = vm._vnode
+      const children = vnode.children
+      // Root vnode
+      expect(vnode.tag).to.equal('div')
+      // Basic vnode
+      expect(children[0].data.staticClass).to.equal('red')
+      expect(children[0].children[0].text).to.equal('hello')
+      // Default slot vnode
+      expect(children[1].tag).to.equal('div')
+      expect(children[1].children[0].text).to.equal('Default slot')
+      // Named slot vnode
+      expect(children[2].tag).to.equal('p')
+      expect(children[2].children[0].text).to.equal('Second slot')
+      // Scoped slot vnode
+      expect(children[3].text).to.equal('hello')
+      // Static content vnode
+      expect(children[4].tag).to.equal('div')
+      expect(children[4].children[0].text).to.equal('Some ')
+      expect(children[4].children[1].tag).to.equal('span')
+      expect(children[4].children[1].children[0].text).to.equal('text')
+      // v-if vnode
+      expect(children[5].text).to.equal('')
+
+      done()
+    })
+  })
 })
