feat(typescript): add ts support

Author: eddyerburgh

jest-vue.js

@@ -3,20 +3,39 @@ const babel = require('babel-core')
 const compileTemplate = require('./lib/template-compiler')
 const generateSourceMap = require('./lib/generate-source-map')
 const addTemplateMapping = require('./lib/add-template-mapping')
+const convertSourceMap = require('convert-source-map')
+const typescript = require('typescript')
 
-const convert = require('convert-source-map')
 const splitRE = /\r?\n/g
 
+function compileBabel (scriptContent) {
+  return babel.transform(scriptContent, {
+    sourceMaps: true,
+    presets: ['es2015'],
+    plugins: ['transform-runtime']
+  })
+}
+
+function compileTypescript (scriptContent) {
+  return {
+    code: typescript.transpile(scriptContent)
+  }
+}
+
+function processScript (scriptPart) {
+  if (scriptPart.lang === 'typescript' || scriptPart.lang === 'ts') {
+    return compileTypescript(scriptPart.content)
+  }
+
+  return compileBabel(scriptPart.content)
+}
+
 module.exports = {
   process (src, path) {
     var parts = vueCompiler.parseComponent(src, { pad: true })
     const renderFunctions = compileTemplate(parts.template.content)
 
-    const result = babel.transform(parts.script.content, {
-      sourceMaps: true,
-      presets: ['es2015'],
-      plugins: ['transform-runtime']
-    })
+    const result = processScript(parts.script)
 
     const script = result.code
 
@@ -38,7 +57,7 @@ module.exports = {
     }
 
     if (map) {
-      output += '\n' + convert.fromJSON(map.toString()).toComment()
+      output += '\n' + convertSourceMap.fromJSON(map.toString()).toComment()
     }
 
     return output

package.json

@@ -49,6 +49,7 @@
     "chalk": "^2.1.0",
     "convert-source-map": "^1.5.0",
     "object-assign": "^4.1.1",
-    "source-map": "^0.5.6"
+    "source-map": "^0.5.6",
+    "typescript": "^2.5.2"
   }
 }

test/TypeScript.spec.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import TypeScript from './resources/TypeScript.vue'
+import jestVue from '../jest-vue'
+import { resolve } from 'path'
+import { readFileSync } from 'fs'
+
+test('processes .vue files', () => {
+  const vm = new Vue(TypeScript).$mount()
+  expect(typeof vm.$el).toBe('object')
+})
+
+test.skip('generates inline sourcemap', () => {
+  const expectedMap = '//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljLnZ1ZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUdBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFLQTtBQVBBO0FBU0E7QUFDQTtBQUNBO0FBQ0E7QUFGQTtBQUlBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQWpCQTs7OztBQVBBO0FBQUEiLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+XG4gICAgPGRpdiBjbGFzcz1cImhlbGxvXCI+XG4gICAgICAgIDxoMSA6Y2xhc3M9XCJoZWFkaW5nQ2xhc3Nlc1wiPnt7IG1zZyB9fTwvaDE+XG4gICAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuICAgIGV4cG9ydCBkZWZhdWx0IHtcbiAgICAgICAgbmFtZTogJ2Jhc2ljJyxcbiAgICAgICAgY29tcHV0ZWQ6IHtcbiAgICAgICAgICAgIGhlYWRpbmdDbGFzc2VzOiBmdW5jdGlvbiBoZWFkaW5nQ2xhc3NlcygpIHtcbiAgICAgICAgICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgICAgICAgICByZWQ6IHRoaXMuaXNDcmF6eSxcbiAgICAgICAgICAgICAgICAgICAgYmx1ZTogIXRoaXMuaXNDcmF6eSxcbiAgICAgICAgICAgICAgICAgICAgc2hhZG93OiB0aGlzLmlzQ3JhenksXG4gICAgICAgICAgICAgICAgfTtcbiAgICAgICAgICAgIH0sXG4gICAgICAgIH0sXG4gICAgICAgIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7XG4gICAgICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgICAgIG1zZzogJ1dlbGNvbWUgdG8gWW91ciBWdWUuanMgQXBwJyxcbiAgICAgICAgICAgICAgICBpc0NyYXp5OiBmYWxzZSxcbiAgICAgICAgICAgIH07XG4gICAgICAgIH0sXG4gICAgICAgIG1ldGhvZHM6IHtcbiAgICAgICAgICAgIHRvZ2dsZUNsYXNzOiBmdW5jdGlvbiB0b2dnbGVDbGFzcygpIHtcbiAgICAgICAgICAgICAgICB0aGlzLmlzQ3JhenkgPSAhdGhpcy5pc0NyYXp5O1xuICAgICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICB9O1xuPC9zY3JpcHQ+XG4iXX0='
+  const filePath = resolve(__dirname, './resources/TypeScript.vue')
+  const fileString = readFileSync(filePath, { encoding: 'utf8' })
+  const output = jestVue.process(fileString, filePath)
+  expect(output).toContain(expectedMap)
+})

test/resources/TypeScript.vue

@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script lang="ts">
+export default {
+    computed: {
+        exclamationMarks(): string {
+            return  'string'
+        }
+    }
+};
+</script>

yarn.lock

@@ -2885,6 +2885,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"
+
 uglify-js@^2.6:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"