add vue functionality, add tests

Author: prograhammer

.gitignore

@@ -17,9 +17,11 @@ jspm_packages
 
 # Optional npm cache directory
 .npm
+package-lock.json
 
 # Optional REPL history
 .node_repl_history
 
-# IDEA directory
+# Editor directories and files
 .idea
+.vscode

.travis.yml

@@ -4,7 +4,7 @@ deploy:
   email: [email protected]
   skip_cleanup: true
   api_key:
-    secure: RdoLwtLDz3PI8fhTg0wXeRuL9JAffNJSTJvNExk9Q+fcccBl8yaNU4AId5OcuDwO3pnb59nKv8fIidW9VzemZ8/eCqCBbCx4qzGFxN2uCB+aBwQ7Svu6GAJV0JIEgIXG+dkByRawd9hCIyvi6IvhIA/XbVbboV5ngjwSW317SA0lbznGHQmIT4o93+YpUuT+pkGC04eJGIH6cgAe61QGwN6WyGx8hfJ+K+OCksZ5A4RIeSkRHY4zRgmlGGtSwOutUPh3OMIdG40E0UXLn3MRdANzekMFSowMZ8aFliqhDsgk/zk8IC/X6OlPFSTAmO1IkKqZiJsr1rxmeJvC9GDxvRZ3Vyv3GncoteEQVjKFsYRlTvmEouECSxafl2aOqa1i2TqU8if5GjgB6mm+pTjDTzF4KB3QkEtRKgTuB47+EUc5zXIBrgIAb3sWu+QgaSFOreG49cGccCsU0viLe2WHbjzuNUP3IMO0x9tL/rm0RQmP3FjQSWlDg6VXYjJs5UcpiQLabgL3u4tso9aYprqTKihqfQkyfi0R5qH872ncGlASkzwbcZxiUeWau3yx46iZdckPNTAKw0afeodmr7aL6B+xEWHfZv9OBn0UE5I23jvIlI+wzyWHWUgeVikBx1ZZV4OqAHOTdEMHQivbir4eYGGAYtY6yxzLpyfD4g0xIzM=
+    secure: J4q7IGixHsEp5of9FG/Zefit8ba6bV7T1I0yV8TBNQHfwBaTC344PBhx3jRg8Nhv04vzkzY+s2cJYIuyqlfEeZrsBcFTvPE9LowR/4cMCoFjteb/gDGtW2AFw2M5pfJ6L4PHXtigO5emWs7xeT3R8KxcQn3e2nzJcGXShc0N9vCCDe601MKJFco5svoHqx5cAmHoknIQDPatddob9VdOUvaRGZWWh7Pv8pdDHGMcUk18TL67p55vMDXL8LvtHlOJpg106P0hX8a3NGhD0Oq9jGgmS77JwAOel36gncxou8CbEXlzpNsH65gJ2/tEJ3uSUZdHYQtQCiQtNzFbqI45JTu7UXkwgQv0Wxb7fnnNsz9StYmquVNp7MDw+Ol2/txA55tBBdSCeK+hy/X7cgI4tI/ftZ98c0YQbeUe/fdaV6PMxv0lPzED2We3N2Y080ineOib1ySsjY0diN2NM6NB8+9TJgqyLzd7X3WofJxExMFMRKuApCDCU7Bjw/FlKkISzvUOMmthL91LunQZ4x+ratiYVbz2cKa7PMcP0Qm7cFnosbyQKJWjM1KTOsCnoCS7iLZHxzKKE+prOWrssbcfENvpSTmouWrGppi9D8nwXDEFNyp+pVx8b7gwQ5GR/WjXb1PY/WkjBgNRaZbHzJlJzYTMBjNjlI1Nn0s4ncWhsZE=
   on:
     tags: true
     branch: master

package.json

@@ -50,8 +50,10 @@
     "@types/lodash.startswith": "^4.2.3",
     "@types/minimatch": "^3.0.1",
     "@types/node": "^8.0.26",
+    "@types/resolve": "0.0.4",
     "@types/webpack": "^3.0.10",
     "chai": "^3.5.0",
+    "css-loader": "^0.28.7",
     "eslint": "^3.19.0",
     "istanbul": "^0.4.5",
     "mocha": "^3.4.1",
@@ -62,6 +64,10 @@
     "ts-loader": "^2.1.0",
     "tslint": "^5.0.0",
     "typescript": "^2.1.0",
+    "vue": "^2.5.9",
+    "vue-class-component": "^6.1.1",
+    "vue-loader": "^13.5.0",
+    "vue-template-compiler": "^2.5.9",
     "webpack": "^3.0.0"
   },
   "peerDependencies": {
@@ -76,6 +82,8 @@
     "lodash.isfunction": "^3.0.8",
     "lodash.isstring": "^4.0.1",
     "lodash.startswith": "^4.2.1",
-    "minimatch": "^3.0.4"
+    "minimatch": "^3.0.4",
+    "resolve": "^1.5.0",
+    "vue-parser": "^1.1.3"
   }
 }

src/IncrementalChecker.ts

@@ -9,6 +9,7 @@ import WorkSet = require('./WorkSet');
 import NormalizedMessage = require('./NormalizedMessage');
 import CancellationToken = require('./CancellationToken');
 import minimatch = require('minimatch');
+import VueProgram = require('./VueProgram');
 
 // Need some augmentation here - linterOptions.exclude is not (yet) part of the official
 // types for tslint.
@@ -36,20 +37,24 @@ class IncrementalChecker {
   programConfig: ts.ParsedCommandLine;
   watcher: FilesWatcher;
 
+  vue: boolean;
+
   constructor(
     programConfigFile: string,
     linterConfigFile: string | false,
     watchPaths: string[],
     workNumber: number,
     workDivision: number,
-    checkSyntacticErrors: boolean
+    checkSyntacticErrors: boolean,
+    vue: boolean
   ) {
     this.programConfigFile = programConfigFile;
     this.linterConfigFile = linterConfigFile;
     this.watchPaths = watchPaths;
     this.workNumber = workNumber || 0;
     this.workDivision = workDivision || 1;
     this.checkSyntacticErrors = checkSyntacticErrors || false;
+    this.vue = vue || false;
     // Use empty array of exclusions in general to avoid having
     // to check of its existence later on.
     this.linterExclusions = [];
@@ -130,7 +135,8 @@ class IncrementalChecker {
 
   nextIteration() {
     if (!this.watcher) {
-      this.watcher = new FilesWatcher(this.watchPaths, ['.ts', '.tsx']);
+      const watchExtensions = this.vue ? ['.ts', '.tsx', '.vue'] : ['.ts', '.tsx'];
+      this.watcher = new FilesWatcher(this.watchPaths, watchExtensions);
 
       // connect watcher with register
       this.watcher.on('change', (filePath: string, stats: fs.Stats) => {
@@ -143,10 +149,6 @@ class IncrementalChecker {
       this.watcher.watch();
     }
 
-    if (!this.programConfig) {
-      this.programConfig = IncrementalChecker.loadProgramConfig(this.programConfigFile);
-    }
-
     if (!this.linterConfig && this.linterConfigFile) {
       this.linterConfig = IncrementalChecker.loadLinterConfig(this.linterConfigFile);
 
@@ -158,12 +160,31 @@ class IncrementalChecker {
       }
     }
 
-    this.program = IncrementalChecker.createProgram(this.programConfig, this.files, this.watcher, this.program);
+    this.program = this.vue ? this.loadVueProgram() : this.loadDefaultProgram();
+
     if (this.linterConfig) {
       this.linter = IncrementalChecker.createLinter(this.program);
     }
   }
 
+  loadVueProgram() {
+    this.programConfig = this.programConfig || VueProgram.loadProgramConfig(this.programConfigFile);
+
+    return VueProgram.createProgram(
+      this.programConfig,
+      path.dirname(this.programConfigFile),
+      this.files,
+      this.watcher,
+      this.program
+    );
+  }
+
+  loadDefaultProgram() {
+    this.programConfig = this.programConfig || IncrementalChecker.loadProgramConfig(this.programConfigFile);
+
+    return IncrementalChecker.createProgram(this.programConfig, this.files, this.watcher, this.program);
+  }
+
   hasLinter() {
     return this.linter !== undefined;
   }

src/VueProgram.ts

@@ -0,0 +1,131 @@
+import fs = require('fs');
+import path = require('path');
+import ts = require('typescript');
+import FilesRegister = require('./FilesRegister');
+import FilesWatcher = require('./FilesWatcher');
+import vueParser = require('vue-parser');
+
+class VueProgram {
+  static loadProgramConfig(configFile: string) {
+    const extraExtensions = ['vue'];
+    
+    const parseConfigHost: ts.ParseConfigHost = {
+        fileExists: ts.sys.fileExists,
+        readFile: ts.sys.readFile,
+        useCaseSensitiveFileNames: ts.sys.useCaseSensitiveFileNames,
+        readDirectory: (rootDir, extensions, excludes, includes, depth) => {
+            return ts.sys.readDirectory(rootDir, extensions.concat(extraExtensions), excludes, includes, depth);
+        }
+    };
+
+    const parsed = ts.parseJsonConfigFileContent(
+      // Regardless of the setting in the tsconfig.json we want isolatedModules to be false
+      Object.assign(ts.readConfigFile(configFile, ts.sys.readFile).config, { isolatedModules: false }),
+      parseConfigHost,
+      path.dirname(configFile)
+    );
+
+    parsed.options.allowNonTsExtensions = true;
+
+    return parsed;
+  }
+
+  /**
+   * Since 99.9% of Vue projects use the wildcard '@/*', we only search for that in tsconfig CompilerOptions.paths.
+   * The path is resolved with thie given substitution and includes the CompilerOptions.baseUrl (if given).
+   * If no paths given in tsconfig, then the default substitution is '[tsconfig directory]/src'.
+   * (This is a fast, simplified inspiration of what's described here: https://github.com/Microsoft/TypeScript/issues/5039)
+   */
+  public static resolveNonTsModuleName(moduleName: string, containingFile: string, basedir: string, options: ts.CompilerOptions) {
+    const baseUrl = options.baseUrl ? options.baseUrl : basedir;
+    const pattern = options.paths ? options.paths['@/*'] : undefined;
+    const substitution = pattern ? options.paths['@/*'][0].replace('*', '') : 'src';
+    const isWildcard = moduleName.substr(0, 2) === '@/';
+    const isRelative = !path.isAbsolute(moduleName);
+
+    if (isWildcard) {
+      moduleName = path.resolve(baseUrl, substitution, moduleName.substr(2));
+    } else if (isRelative) {
+      moduleName = path.resolve(path.dirname(containingFile), moduleName);
+    }
+
+    return moduleName;
+  }
+
+  static createProgram(
+    programConfig: ts.ParsedCommandLine,
+    basedir: string,
+    files: FilesRegister,
+    watcher: FilesWatcher,
+    oldProgram: ts.Program
+  ) {
+    const host = ts.createCompilerHost(programConfig.options);
+    const realGetSourceFile = host.getSourceFile;
+
+    // We need a host that can parse Vue SFCs (single file components).
+    host.getSourceFile = (filePath, languageVersion, onError) => {
+      // first check if watcher is watching file - if not - check it's mtime
+      if (!watcher.isWatchingFile(filePath)) {
+        try {
+          const stats = fs.statSync(filePath);
+
+          files.setMtime(filePath, stats.mtime.valueOf());
+        } catch (e) {
+          // probably file does not exists
+          files.remove(filePath);
+        }
+      }
+
+      // get source file only if there is no source in files register
+      if (!files.has(filePath) || !files.getData(filePath).source) {
+        files.mutateData(filePath, (data) => {
+          data.source = realGetSourceFile(filePath, languageVersion, onError);
+        });
+      }
+
+      let source = files.getData(filePath).source;
+
+      // get typescript contents from Vue file
+      if (source && filePath.substr(-4) === '.vue') {
+        const parsed = vueParser.parse(source.text, 'script', { lang: ['ts', 'tsx', 'js', 'jsx'] });
+        source = ts.createSourceFile(filePath, parsed, languageVersion, true);
+      }
+
+      return source;
+    };
+
+    // We need a host with special module resolution for Vue files.
+    host.resolveModuleNames = (moduleNames, containingFile) => {
+      const resolvedModules: ts.ResolvedModule[] = [];
+
+      for (const moduleName of moduleNames) {
+        // Try to use standard resolution.
+        const result = ts.resolveModuleName(moduleName, containingFile, programConfig.options, {
+          fileExists: host.fileExists,
+          readFile: host.readFile
+        });
+
+        if (result.resolvedModule) {
+          resolvedModules.push(result.resolvedModule);
+        } else {
+          // For non-ts extensions.
+          resolvedModules.push({
+            resolvedFileName: VueProgram.resolveNonTsModuleName(moduleName, containingFile, basedir, programConfig.options),
+            extension: '.ts'
+          } as ts.ResolvedModuleFull);
+        }
+      }
+
+      return resolvedModules;
+    };
+
+    return ts.createProgram(
+      programConfig.fileNames,
+      programConfig.options,
+      host,
+      oldProgram // re-use old program
+    );
+  }
+}
+
+export = VueProgram;

src/index.ts

@@ -30,6 +30,7 @@ interface Options {
   checkSyntacticErrors: boolean;
   memoryLimit: number;
   workers: number;
+  vue: boolean;
 }
 
 /**
@@ -84,6 +85,8 @@ class ForkTsCheckerWebpackPlugin {
 
   service: childProcess.ChildProcess;
 
+  vue: boolean;
+
   constructor(options: Options) {
     options = options || {} as Options;
     this.options = Object.assign({}, options);
@@ -126,6 +129,8 @@ class ForkTsCheckerWebpackPlugin {
 
     this.typescriptVersion = require('typescript').version;
     this.tslintVersion = this.tslint ? require('tslint').Linter.VERSION : undefined;
+
+    this.vue = options.vue === true; // default false
   }
 
   static createFormatter(type: 'default' | 'codeframe', options: any) {
@@ -313,7 +318,8 @@ class ForkTsCheckerWebpackPlugin {
             WATCH: this.isWatching ? this.watchPaths.join('|') : '',
             WORK_DIVISION: Math.max(1, this.workersNumber),
             MEMORY_LIMIT: this.memoryLimit,
-            CHECK_SYNTACTIC_ERRORS: this.checkSyntacticErrors
+            CHECK_SYNTACTIC_ERRORS: this.checkSyntacticErrors,
+            VUE: this.vue
           }
         ),
         stdio: ['inherit', 'inherit', 'inherit', 'ipc']

src/service.ts

@@ -10,7 +10,8 @@ const checker = new IncrementalChecker(
   process.env.WATCH === '' ? [] : process.env.WATCH.split('|'),
   parseInt(process.env.WORK_NUMBER, 10),
   parseInt(process.env.WORK_DIVISION, 10),
-  process.env.CHECK_SYNTACTIC_ERRORS === 'true'
+  process.env.CHECK_SYNTACTIC_ERRORS === 'true',
+  process.env.VUE === 'true'
 );
 
 function run(cancellationToken: CancellationToken) {

test/integration/index.spec.js

@@ -218,8 +218,10 @@ describe('[INTEGRATION] index', function () {
 
   it('should find syntactic errors when checkSyntacticErrors is true', function (callback) {
     var compiler = createCompiler({ checkSyntacticErrors: true }, true);
+    var logger = console;
 
     compiler.run(function(error, stats) {
+      // logger.info(stats.compilation.errors);
       expect(stats.compilation.errors.length).to.be.equal(2);
       callback();
     });