support es2015 features in templates using buble

Author: yyx990803

lib/loader.js

@@ -53,7 +53,7 @@ module.exports = function (content) {
     options.cssSourceMap !== false
 
   var defaultLoaders = {
-    html: templateCompilerPath + '?id=' + moduleId + (hasBabel ? '&babel=true' : ''),
+    html: templateCompilerPath + '?id=' + moduleId,
     css: styleLoaderPath + '!css-loader' + (needCssSourceMap ? '?sourceMap' : ''),
     js: hasBabel ? 'babel-loader' : ''
   }

lib/template-compiler.js

@@ -1,4 +1,5 @@
 var compiler = require('vue-template-compiler')
+var transpile = require('vue-template-es2015-compiler')
 var loaderUtils = require('loader-utils')
 var beautify = require('js-beautify').js_beautify
 var normalize = require('./normalize')
@@ -46,26 +47,10 @@ module.exports = function (html) {
     })
     code = 'module.exports={render:function(){},staticRenderFns:[]}'
   } else {
-    code = 'module.exports={' +
-      'render:' + toFunction(compiled.render, query.babel) + ',' +
-      'staticRenderFns: [' + compiled.staticRenderFns.map(function (code) {
-        return toFunction(code, query.babel)
-      }).join(',') + ']' +
-    '}'
-
-    if (query.babel) {
-      var babelOptions = {
-        filename: require('path').basename(this.resourcePath),
-        sourceRoot: process.cwd(),
-        babelrc: true
-      }
-      if (this.options.babel) {
-        for (var key in this.options.babel) {
-          babelOptions[key] = this.options.babel[key]
-        }
-      }
-      code = transpile(code, babelOptions)
-    }
+    code = transpile('module.exports={' +
+      'render:' + toFunction(compiled.render) + ',' +
+      'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
+    '}')
   }
   // hot-reload
   if (!isServer &&
@@ -82,18 +67,6 @@ module.exports = function (html) {
   return code
 }
 
-function transpile (code, options) {
-  return require('babel-core').transform(code, options).code
-    // strip use strict
-    .replace(/['"]use strict['"];?\n?/, '')
-    // add back with
-    .replace(/if\s*\("__VUE_LOADER_WITH__"\)/g, 'with(this)')
-}
-
-function toFunction (code, needBabel) {
-  if (needBabel) {
-    // replace "with(this){" with something that works in strict mode
-    code = code.replace(/with\(this\)/, 'if("__VUE_LOADER_WITH__")')
-  }
+function toFunction (code) {
   return 'function (){' + beautify(code, { indent_size: 2 }) + '}'
 }

package.json

@@ -40,7 +40,8 @@
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.0.1",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.0.0-beta.6"
+    "vue-template-compiler": "^2.0.0-rc.2",
+    "vue-template-es2015-compiler": "^1.0.0"
   },
   "peerDependencies": {
     "css-loader": "^0.23.1"

test/fixtures/babel.vue

@@ -0,0 +1,3 @@
+<template>
+  <div :class="{ [`test-${a}`]: true, b }"></div>
+</template>

test/fixtures/es2015.vue

@@ -318,16 +318,18 @@ describe('vue-loader', function () {
     })
   })
 
-  it('transpile template with babel', function (done) {
+  it('transpile ES2015 features in template', function (done) {
     test({
-      entry: './test/fixtures/babel.vue'
+      entry: './test/fixtures/es2015.vue'
     }, function (window, module) {
       var vnode = mockRender(module, {
-        a: 'hello'
+        a: 'hello',
+        b: true
       })
       // <div :class="{[a]:true}"></div>
       expect(vnode.tag).to.equal('div')
-      expect(vnode.data.class.hello).to.equal(true)
+      expect(vnode.data.class['test-hello']).to.equal(true)
+      expect(vnode.data.class['b']).to.equal(true)
       done()
     })
   })