Add vue-template-es2015-compiler

package.json

@@ -37,6 +37,7 @@
     "parse5": "^2.2.2",
     "rollup-pluginutils": "^1.5.2",
     "vue-template-compiler": "^2.0.3",
+    "vue-template-es2015-compiler": "^1.2.4",
     "vue-template-validator": "^1.1.5"
   },
   "devDependencies": {

src/index.js

@@ -131,11 +131,10 @@ export default function vue(options = {}) {
             return result;
         },
         transformBundle(source) {
-            debug('Replace window.__VUE_WITH_STATEMENT__ with with(this) and generate style.');
             generateStyleBundle();
             const map = new MagicString(source);
             const result = {
-                code: source.replace(/if[\s]*\(window\.__VUE_WITH_STATEMENT__\)/g, 'with(this)'),
+                code: source,
                 map: map.generateMap({ hires: true }),
             };
             debug('with(this) fixed!');

src/vueTransform.js

@@ -2,6 +2,7 @@ import deIndent from 'de-indent';
 import htmlMinifier from 'html-minifier';
 import parse5 from 'parse5';
 import validateTemplate from 'vue-template-validator';
+import transpileVueTemplate from 'vue-template-es2015-compiler';
 import { relative } from 'path';
 import MagicString from 'magic-string';
 import debug from './debug';
@@ -44,9 +45,6 @@ function padContent(content) {
  * @returns {string}
  */
 function wrapRenderFunction(code) {
-    // Replace with(this) by something that works on strict mode
-    // https://github.com/vuejs/vue-template-es2015-compiler/blob/master/index.js
-    code = code.replace(/with\(this\)/g, 'if(window.__VUE_WITH_STATEMENT__)');
     return `function(){${code}}`;
 }
 
@@ -62,12 +60,27 @@ function injectRender(script, render, lang) {
     if (['js', 'babel'].indexOf(lang.toLowerCase()) > -1) {
         const matches = /(export default[^{]*\{)/g.exec(script);
         if (matches) {
-            return script.split(matches[1])
-                  .join(`${matches[1]}` +
+            const scriptWithRender = script.split(matches[1])
+                  // buble doesn't support export default, not even with the
+                  // module: false trasforms:
+                  // https://buble.surge.sh/guide/#using-es-modules
+                  .join('module.exports={' +
                         `render: ${wrapRenderFunction(render.render)},` +
                         'staticRenderFns: [' +
                         `${render.staticRenderFns.map(wrapRenderFunction).join(',')}],`
                   );
+            return transpileVueTemplate(scriptWithRender, {
+                // Remove all trasforms added by vue since it's up to the user
+                // to use whatever he wants
+                // https://github.com/vuejs/vue-template-es2015-compiler/blob/master/index.js#L6
+                transforms: {
+                    templateString: false,
+                    conciseMethodProperty: false,
+                    stripWith: true, // remove the with statement
+                    computedProperty: false,
+                },
+                // put back the export default {
+            }).replace('module.exports={', 'export default {');
         }
 
         debug(`No injection location found in: \n${script}\n`);

test/expects/compileTemplate.js

@@ -1,9 +1,19 @@
-var compileTemplate = {render: function(){with(this){return _h('div',[_h('p',[_s(msg)])])}},staticRenderFns: [],
+var compileTemplate = {render: function(){var _vm=this;return _vm._h('div',[_vm._h('p',[_vm._s(_vm.msg)])])},staticRenderFns: [],
   data() {
     return {
-      msg: 'Compile Template'
-    }
-  }
+      msg: 'Compile Template',
+    };
+  },
+  computed: {
+    exclamation() {
+      return `${this.msg}!`;
+    },
+    uselessFatArrow: () => 0
+  },
+  fatArrowTest() {
+    const a = [5, 7];
+    a.map(v => this.msg);
+  },
 };
 
-export default compileTemplate;
+export default compileTemplate;

test/fixtures/compileTemplate.vue

@@ -8,8 +8,18 @@
 export default {
   data() {
     return {
-      msg: 'Compile Template'
-    }
-  }
+      msg: 'Compile Template',
+    };
+  },
+  computed: {
+    exclamation() {
+      return `${this.msg}!`;
+    },
+    uselessFatArrow: () => 0
+  },
+  fatArrowTest() {
+    const a = [5, 7];
+    a.map(v => this.msg);
+  },
 }
 </script>