Convert to TypeScript

.eslintrc

@@ -0,0 +1,21 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "rules": {
+    "comma-dangle": ["error", "always-multiline"]
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": false
+    },
+    "project": "./tsconfig.json"
+  },
+  "extends": [
+    "xo"
+  ]
+}

.gitignore

@@ -1 +1,2 @@
 node_modules
+.idea/

bin/cli.js → bin/cli.ts

@@ -1,5 +1,9 @@
 #!/usr/bin/env node
-const chalk = require('chalk')
+import chalk from 'chalk';
+import cac from 'cac';
+import pkg from '../package.json';
+import { humanlizePath } from '../lib/utils';
+const importLazy = require('import-lazy')(require);
 
 if (parseInt(process.versions.node, 10) < 8) {
   console.error(
@@ -8,9 +12,7 @@ if (parseInt(process.versions.node, 10) < 8) {
   console.error(chalk.dim(`Current version: ${process.versions.node}`))
   process.exit(1)
 }
-
-const cac = require('cac')
-const pkg = require('../package.json')
+const VueCompile = importLazy('../lib');
 
 const cli = cac('vue-compile')
 
@@ -37,16 +39,13 @@ cli
       process.env.DEBUG = `vue-compile:${options.debug}`
     }
 
-    const vueCompile = require('../lib')(options)
-
+    const vueCompile = VueCompile(options);
     if (!vueCompile.options.input) {
       return cli.outputHelp()
     }
 
-    vueCompile.on('normalized', (input, output) => {
+    vueCompile.on('normalized', (input: string, output: string) => {
       if (!vueCompile.options.debug) {
-        const { humanlizePath } = require('../lib/utils')
-
         console.log(
           `${chalk.magenta(humanlizePath(input))} ${chalk.dim(
             '->'
@@ -79,7 +78,7 @@ cli.help()
 
 cli.parse()
 
-function handleError(error) {
+function handleError(error: Error) {
   console.error(error.stack)
   process.exit(1)
 }

lib/babel/preset.js → lib/babel/preset.ts

@@ -1,6 +1,6 @@
-const { cssExtensionsRe } = require('../utils')
+import { cssExtensionsRe } from '../utils';
 
-module.exports = (_, { modern } = {}) => {
+export default (_: any, { modern }: { modern: string}) => {
   return {
     presets: [
       [
@@ -11,23 +11,25 @@ module.exports = (_, { modern } = {}) => {
         }
       ]
     ],
-    plugins: [replaceExtensionInImports]
+    plugins: [_replaceExtensionInImports]
   }
 }
 
-function replaceExtensionInImports({ types: t }) {
+function _replaceExtensionInImports({ types: t }: { types: {
+    stringLiteral: (value: string) => string;
+  }}) {
   return {
     name: 'replace-extension-in-imports',
     visitor: {
-      ImportDeclaration(path) {
+      ImportDeclaration(path: any) {
         if (cssExtensionsRe.test(path.node.source.value)) {
           path.node.source.value = path.node.source.value.replace(
             cssExtensionsRe,
             '.css'
           )
         }
       },
-      CallExpression(path) {
+      CallExpression(path: any) {
         if (path.node.callee.name === 'require') {
           const arg = path.get('arguments.0')
           if (arg) {

lib/compileScript.ts

@@ -0,0 +1,25 @@
+import { notSupportedLang } from './utils'
+import SFCDescriptor from '@vue/component-compiler-utils'
+import { TCtx } from './types'
+import babelCompiler from './script-compilers/babel'
+import tsCompiler from './script-compilers/ts'
+
+export default async (script: SFCDescriptor.SFCBlock, ctx: TCtx) => {
+  if (!script) return script
+
+  const code = script.content.replace(/^\/\/$/gm, '')
+
+  if (script.lang === 'ts' || script.lang === 'typescript') {
+    script.content = await tsCompiler(code, ctx)
+  } else if (
+    !script.lang ||
+    script.lang === 'esnext' ||
+    script.lang === 'babel'
+  ) {
+    script.content = await babelCompiler(code, ctx)
+  } else {
+    throw new Error(notSupportedLang(script.lang, 'script'))
+  }
+
+  return script
+}

lib/compileStyles.js → lib/compileStyles.ts

@@ -1,24 +1,28 @@
-const { notSupportedLang } = require('./utils')
+import { notSupportedLang } from './utils';
+import stylus from './style-compilers/stylus';
+import postcss from './style-compilers/postcss';
+import sass from './style-compilers/sass';
+import { SFCBlock } from '@vue/component-compiler-utils';
 
-module.exports = (styles, { filename }) => {
+export default  (styles: SFCBlock[], { filename } : { filename: string }) => {
   return Promise.all(
     styles.map(async style => {
       // Do not handle "src" import
       // Until we figure out how to handle it
       if (style.src) return style
 
       if (style.lang === 'stylus') {
-        style.content = await require('./style-compilers/stylus')(
+        style.content = await stylus(
           style.content,
           { filename }
         )
       } else if (!style.lang || style.lang === 'postcss') {
-        style.content = await require('./style-compilers/postcss')(
+        style.content = await postcss(
           style.content,
           { filename }
         )
       } else if (style.lang === 'scss' || style.lang === 'sass') {
-        style.content = await require('./style-compilers/sass')(style.content, {
+        style.content = await sass(style.content, {
           filename,
           indentedSyntax: style.lang === 'sass'
         })

lib/compileTemplate.ts

@@ -0,0 +1,5 @@
+import { SFCBlock } from '@vue/component-compiler-utils';
+
+export default (template: SFCBlock) => {
+  return template
+}

lib/importLocal.js → lib/importLocal.ts

@@ -1,6 +1,11 @@
 const importFrom = require('import-from')
-
-module.exports = (dir, name, fallback) => {
+interface ImportLocal {
+  dir: string,
+  name: string,
+  fallback?: string
+}
+export default (locals: ImportLocal) => {
+  const { dir, name, fallback } = locals;
   const found = importFrom.silent(dir, name) || importFrom.silent(dir, fallback)
   if (!found) {
     throw new Error(