Merge pull request #260 from vuejs/transpile-template

Transpile template using babel
vuejs · Aug 1, 2020 · a0dfa5a · a0dfa5a
2 parents c5e69b2 + 0da767d
commit a0dfa5a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/e2e/__projects__/basic/__snapshots__/test.js.snap b/e2e/__projects__/basic/__snapshots__/test.js.snap
@@ -33,16 +33,25 @@ var _default = {
 exports[\\"default\\"] = _default;
 ;
 \\"use strict\\";
-Object.defineProperty(exports, \\"__esModule\\", { value: true });
-var vue_1 = require(\\"vue\\");
-var _hoisted_1 = { class: \\"hello\\" };
-function render(_ctx, _cache) {
-    return (vue_1.openBlock(), vue_1.createBlock(\\"div\\", _hoisted_1, [
-        vue_1.createVNode(\\"h1\\", { class: _ctx.headingClasses }, vue_1.toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */)
-    ]));
-}
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
 exports.render = render;
-//# sourceMappingURL=module.js.map;
+
+var _vue = require(\\"vue\\");
+
+var _hoisted_1 = {
+  \\"class\\": \\"hello\\"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(\\"div\\", _hoisted_1, [(0, _vue.createVNode)(\\"h1\\", {
+    \\"class\\": _ctx.headingClasses
+  }, (0, _vue.toDisplayString)(_ctx.msg), 3
+  /* TEXT, CLASS */
+  )]);
+};
 ;exports.default = {...exports.default, render};
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljLnZ1ZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQUtBO0FBUEE7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBakJBIiwic291cmNlc0NvbnRlbnQiOlsiPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwiaGVsbG9cIj5cbiAgICA8aDEgOmNsYXNzPVwiaGVhZGluZ0NsYXNzZXNcIj57eyBtc2cgfX08L2gxPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBtb2R1bGU9XCJjc3NcIj5cbi50ZXN0QSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbn1cbjwvc3R5bGU+XG48c3R5bGUgbW9kdWxlPlxuLnRlc3RCIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTtcbn1cbjwvc3R5bGU+XG48c3R5bGU+XG4udGVzdEMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuPC9zdHlsZT5cblxuPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgbmFtZTogJ2Jhc2ljJyxcbiAgY29tcHV0ZWQ6IHtcbiAgICBoZWFkaW5nQ2xhc3NlczogZnVuY3Rpb24gaGVhZGluZ0NsYXNzZXMoKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICByZWQ6IHRoaXMuaXNDcmF6eSxcbiAgICAgICAgYmx1ZTogIXRoaXMuaXNDcmF6eSxcbiAgICAgICAgc2hhZG93OiB0aGlzLmlzQ3JhenlcbiAgICAgIH1cbiAgICB9XG4gIH0sXG4gIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG1zZzogJ1dlbGNvbWUgdG8gWW91ciBWdWUuanMgQXBwJyxcbiAgICAgIGlzQ3Jhenk6IGZhbHNlXG4gICAgfVxuICB9LFxuICBtZXRob2RzOiB7XG4gICAgdG9nZ2xlQ2xhc3M6IGZ1bmN0aW9uIHRvZ2dsZUNsYXNzKCkge1xuICAgICAgdGhpcy5pc0NyYXp5ID0gIXRoaXMuaXNDcmF6eVxuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG4iXX0="
 `;
@@ -80,16 +89,25 @@ var _default = {
 exports[\\"default\\"] = _default;
 ;
 \\"use strict\\";
-Object.defineProperty(exports, \\"__esModule\\", { value: true });
-var vue_1 = require(\\"vue\\");
-var _hoisted_1 = { class: \\"hello\\" };
-function render(_ctx, _cache) {
-    return (vue_1.openBlock(), vue_1.createBlock(\\"div\\", _hoisted_1, [
-        vue_1.createVNode(\\"h1\\", { class: _ctx.headingClasses }, vue_1.toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */)
-    ]));
-}
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
 exports.render = render;
-//# sourceMappingURL=module.js.map;
+
+var _vue = require(\\"vue\\");
+
+var _hoisted_1 = {
+  \\"class\\": \\"hello\\"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(\\"div\\", _hoisted_1, [(0, _vue.createVNode)(\\"h1\\", {
+    \\"class\\": _ctx.headingClasses
+  }, (0, _vue.toDisplayString)(_ctx.msg), 3
+  /* TEXT, CLASS */
+  )]);
+};
 ;exports.default = {...exports.default, render};
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNvdXJjZU1hcHNTcmMudnVlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBS0E7QUFQQTtBQVNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFqQkEiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdiYXNpYycsXG4gIGNvbXB1dGVkOiB7XG4gICAgaGVhZGluZ0NsYXNzZXM6IGZ1bmN0aW9uIGhlYWRpbmdDbGFzc2VzKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgcmVkOiB0aGlzLmlzQ3JhenksXG4gICAgICAgIGJsdWU6ICF0aGlzLmlzQ3JhenksXG4gICAgICAgIHNoYWRvdzogdGhpcy5pc0NyYXp5XG4gICAgICB9XG4gICAgfVxuICB9LFxuICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBtc2c6ICdXZWxjb21lIHRvIFlvdXIgVnVlLmpzIEFwcCcsXG4gICAgICBpc0NyYXp5OiBmYWxzZVxuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIHRvZ2dsZUNsYXNzOiBmdW5jdGlvbiB0b2dnbGVDbGFzcygpIHtcbiAgICAgIHRoaXMuaXNDcmF6eSA9ICF0aGlzLmlzQ3JhenlcbiAgICB9XG4gIH1cbn1cbiJdfQ=="
 `;
diff --git a/lib/generate-code.js b/lib/generate-code.js
@@ -16,7 +16,7 @@ module.exports = function generateCode(
   }
 
   if (templateResult) {
-    output += `${templateResult.outputText};\n`
+    output += `${templateResult.code};\n`
   }
 
   if (output.includes('exports.render = render;')) {

diff --git a/lib/process.js b/lib/process.js
@@ -1,5 +1,5 @@
-const { transpileModule } = require('typescript')
 const { parse, compileTemplate } = require('@vue/compiler-sfc')
+const { transform } = require('@babel/core')
 const convertSourceMap = require('convert-source-map')
 const babelTransformer = require('babel-jest')
 
@@ -9,7 +9,6 @@ const coffeescriptTransformer = require('./transformers/coffee')
 const _processStyle = require('./process-style')
 const processCustomBlocks = require('./process-custom-blocks')
 const getVueJestConfig = require('./utils').getVueJestConfig
-const getTsJestConfig = require('./utils').getTsJestConfig
 const logResultErrors = require('./utils').logResultErrors
 const stripInlineSourceMap = require('./utils').stripInlineSourceMap
 const getCustomTransformer = require('./utils').getCustomTransformer
@@ -67,22 +66,13 @@ function processTemplate(template, filename, config) {
     preprocessOptions: vueJestConfig[template.lang]
   })
 
-  // const result = compilerUtils.compileTemplate({
-  //   source: template.content,
-  //   compiler: VueTemplateCompiler,
-  //   filename: filename,
-  //   compilerOptions: {
-  //     optimize: false
-  //   },
-  //   isFunctional: template.attrs.functional,
-  //   preprocessLang: template.lang,
-  //   preprocessOptions: vueJestConfig[template.lang]
-  // })
-
   logResultErrors(result)
 
-  const tsconfig = getTsJestConfig(config)
-  return transpileModule(result.code, tsconfig)
+  const babelify = transform(result.code, { filename: 'file.js' })
+
+  return {
+    code: babelify.code
+  }
 }
 
 function processStyle(styles, filename, config) {