feat: typescript support (#109)

Jack-Works · znck · commit 240c0f792a87 · 2017-07-18T14:17:46.000+05:30
* Add support for Typescript

* Add inject support for `export defaults Var` when Var refers to a class, function or Object

* Fix eslint

* fix: normalize script language names

* Add test for Typescript support

* Fix test for typescript
diff --git a/config/build.js b/config/build.js
@@ -48,6 +48,7 @@ rollup.rollup({
                         'stylus',
                         'vue-template-es2015-compiler',
                         'vue-template-validator',
+                        'typescript'
                     ].indexOf(id) > -1
           }
       })
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "posthtml": "^0.9.2",
     "posthtml-attrs-parser": "^0.1.1",
     "rollup-pluginutils": "^2.0.1",
+    "typescript": "^2.4.1",
     "vue-template-compiler": "*",
     "vue-template-es2015-compiler": "^1.5.0",
     "vue-template-validator": "^1.1.5"
diff --git a/src/injections.js b/src/injections.js
diff --git a/src/options.js b/src/options.js
@@ -1,5 +1,5 @@
 import { templateJs, moduleJs, scopeJs, renderJs } from './injections'
-import { coffee } from './script/index'
+import { coffee, typescript } from './script/index'
 
 export default {
     // Style compilation options.
@@ -73,28 +73,32 @@ export default {
     inject: {
         template: {
             js: templateJs,
-            babel: templateJs
+            ts: templateJs,
+            coffee: templateJs
         },
 
         render: {
             js: renderJs,
-            babel: renderJs
+            ts: renderJs,
+            coffee: renderJs
         },
 
         module: {
             js: moduleJs,
-            babel: moduleJs
+            ts: moduleJs,
+            coffee: moduleJs
         },
 
         scoped: {
             js: scopeJs,
-            babel: scopeJs
+            ts: scopeJs,
+            coffee: scopeJs
         }
     },
 
     // script languages.
     script: {
         coffee,
-        coffeescript: coffee
+        ts: typescript
     }
 }
diff --git a/src/script/coffee.js b/src/script/coffee.js
@@ -4,7 +4,8 @@ export default function (script) {
     return new Promise((resolve, reject) => {
         coffee.compile(script.code, { bare: true }, (status, output) => {
             if (status === 0) {
-                script.code = output
+                script.code = output.replace(/^\/\/ Generated by CoffeeScript [\d]+.[\d]+.[\d]+/i, '')
+                console.log(script.code)
 
                 resolve(script)
             } else {
diff --git a/src/script/index.js b/src/script/index.js
@@ -1 +1,2 @@
 export { default as coffee } from './coffee'
+export { default as typescript } from './typescript'
diff --git a/src/script/typescript.js b/src/script/typescript.js
@@ -0,0 +1,14 @@
+import * as Typescript from 'typescript'
+import debug from '../debug'
+export default async function (script, id, content, options, nodes) {
+    debug(`Typescript: Compiling ${id}`)
+    options.typescript = options.typescript || {}
+    const config = Object.assign({}, options.typescript, { fileName: id })
+    config.compilerOptions = Object.assign({}, options.typescript.compilerOptions, {
+        experimentalDecorators: true,
+        module: Typescript.ModuleKind.ES2015,
+        moduleResolution: Typescript.ModuleResolutionKind.NodeJs
+    })
+    script.code = (await Typescript.transpileModule(script.code, config)).outputText
+    return script
+}
diff --git a/src/vueTransform.js b/src/vueTransform.js
@@ -29,9 +29,9 @@ function getNodeAttrs (node) {
  */
 function padContent (content) {
     return content
-          .split(/\r?\n/g)
-          .map(() => '')
-          .join('\n')
+        .split(/\r?\n/g)
+        .map(() => '')
+        .join('\n')
 }
 
 function validateTemplate (code, content, id) {
@@ -54,9 +54,9 @@ async function processTemplate (source, id, content, options, nodes, modules) {
     const extras = { modules, id, lang: source.attrs.lang }
     const code = deIndent(source.code)
     const template = await (
-          options.disableCssModuleStaticReplacement !== true
-                ? templateProcessor(code, extras, options)
-                : code
+        options.disableCssModuleStaticReplacement !== true
+            ? templateProcessor(code, extras, options)
+            : code
     )
 
     if (!options.compileTemplate) {
@@ -66,11 +66,28 @@ async function processTemplate (source, id, content, options, nodes, modules) {
     return htmlMinifier.minify(template, options.htmlMinifier)
 }
 
+/* eslint-disable complexity */
+function normalizeLang (any) {
+    switch (any) {
+    case 'coffee':
+    case 'coffeescript':
+    case 'coffee-script':
+        return 'coffee'
+    case 'ts':
+    case 'typescript':
+    case 'type-script':
+        return 'ts'
+    default:
+        return 'js'
+    }
+}
+/* eslint-enable complexity */
+
 async function processScript (source, id, content, options, nodes, modules, scoped) {
     const template = await processTemplate(nodes.template[0], id, content, options, nodes, modules)
 
     debug(`Process script: ${id}`)
-    const lang = 'js'
+    const lang = normalizeLang(source.attrs.lang)
 
     if (source.attrs.lang && ['js', 'babel'].indexOf(source.attrs.lang) < 0) {
         if (!(source.attrs.lang in options.script)) {
@@ -123,7 +140,7 @@ async function processStyle (styles, id, content, options) {
         const style = styles[i]
 
         const code = deIndent(
-              padContent(content.slice(0, content.indexOf(style.code))) + style.code
+            padContent(content.slice(0, content.indexOf(style.code))) + style.code
         )
 
         const map = (new MagicString(code)).generateMap({ hires: true })
@@ -199,7 +216,6 @@ const hasScoped = function (styles) {
         return scoped || style.scoped
     }, false)
 }
-
 export default async function vueTransform (code, id, options) {
     const nodes = parseTemplate(code)
     const css = await processStyle(nodes.style, id, code, options, nodes)
diff --git a/test/expects/coffee.js b/test/expects/coffee.js
@@ -1,7 +1,6 @@
-// Generated by CoffeeScript 1.12.4
 var component;
 
-component = { template: "<h1 :id=\"id\" @click=\"hi\">hello</h1><input type=\"text\">",
+component = { template: "<h1 :id=\"id\" @click=\"hi\">hello</h1>",
   data: function() {
     return [2, 4, 6, 8];
   }
diff --git a/test/expects/typescript-export-obj.js b/test/expects/typescript-export-obj.js
@@ -0,0 +1,7 @@
+var app = {
+};
+
+var __$app = Object.assign(app, { template: "<h1 :id=\"id\" @click=\"hi\">hello</h1><input type=\"text\">",});
+    __$app.prototype = app.prototype;
+
+export default __$app;
diff --git a/test/expects/typescript.js b/test/expects/typescript.js
@@ -0,0 +1,12 @@
+var component = { template: "<h1 :id=\"id\" @click=\"hi\">hello</h1><input type=\"text\">",
+    data: function () { return ({
+        hello: 'world!'
+    }); },
+    methods: {
+        hello: function () {
+            return this.hello;
+        }
+    }
+};
+
+export default component;
diff --git a/test/fixtures/app.ts b/test/fixtures/app.ts
@@ -0,0 +1,2 @@
+export default {
+}
diff --git a/test/fixtures/coffee.vue b/test/fixtures/coffee.vue
@@ -1,6 +1,5 @@
 <template>
 <h1 :id="id" @click="hi">hello</h1>
-<input type="text">
 </template>
 
 <script lang="coffee">
diff --git a/test/fixtures/typescript-export-obj.vue b/test/fixtures/typescript-export-obj.vue
@@ -0,0 +1,10 @@
+<template>
+	<h1 :id="id" @click="hi">
+		hello</h1>
+	<input type="text">
+</template>
+
+<script lang="ts">
+import app from './app.ts'
+export default app
+</script>
diff --git a/test/fixtures/typescript.vue b/test/fixtures/typescript.vue
@@ -0,0 +1,24 @@
+<template>
+	<h1 :id="id" @click="hi">
+		hello</h1>
+	<input type="text">
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+interface Data {
+	hello: string
+}
+const component = {
+	data: () => ({
+		hello: 'world!'
+	}),
+	methods: {
+		hello() {
+			return this.hello
+		}
+	}
+} as Vue.ComponentOptions<Data & Vue>
+
+export default component
+</script>
diff --git a/test/test.js b/test/test.js
@@ -75,7 +75,7 @@ function test(name) {
 describe('rollup-plugin-vue', function () {
     fs.readdirSync(path.resolve(__dirname, 'fixtures'))
           .forEach(function (file) {
-              test(file.substr(0, file.length - 4))
+              file.endsWith('.vue') && test(file.substr(0, file.length - 4))
           })
 })
 
diff --git a/yarn.lock b/yarn.lock
@@ -3243,6 +3243,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
+
 uglify-js@2.7.x, uglify-js@^2.6, uglify-js@^2.6.1, uglify-js@^2.7.5:
   version "2.7.5"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ rollup.rollup({`
`48`	`48`	`'stylus',`
`49`	`49`	`'vue-template-es2015-compiler',`
`50`	`50`	`'vue-template-validator',`
	`51`	`+ 'typescript'`
`51`	`52`	`].indexOf(id) > -1`
`52`	`53`	`}`
`53`	`54`	`})`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export { default as coffee } from './coffee'`
	`2`	`+export { default as typescript } from './typescript'`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,6 @@`
`1`		`-// Generated by CoffeeScript 1.12.4`
`2`	`1`	`var component;`
`3`	`2`
`4`		`-component = { template: "<h1 :id=\"id\" @click=\"hi\">hello</h1><input type=\"text\">",`
	`3`	`+component = { template: "<h1 :id=\"id\" @click=\"hi\">hello</h1>",`
`5`	`4`	`data: function() {`
`6`	`5`	`return [2, 4, 6, 8];`
`7`	`6`	`}`