Merge in upstream changes

Author: johnnyreilly

CHANGELOG.md

@@ -1,3 +1,6 @@
+## v0.4.0
+ * Support webpack
+
 ## v0.3.0
  * Add `vue` support
 

README.md

@@ -210,8 +210,7 @@ import Hello from '@/components/hello.vue'
 }
 ```
 
-6. The commonly used `@` path wildcard will work if you set up a `baseUrl` and `paths` (in `compilerOptions`) to include `@/*`. If you don't set this, then 
-the fallback for the `@` wildcard will be `[tsconfig directory]/src` (we hope to make this more flexible on future releases):  
+6. It accepts any wildcard in your TypeScript configuration:  
 ```
 // tsconfig.json
 {
@@ -223,6 +222,9 @@ the fallback for the `@` wildcard will be `[tsconfig directory]/src` (we hope to
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "~/*": [
+        "src/*"
       ]
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fork-ts-checker-webpack-plugin",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Runs typescript type checker and linter on separate process.",
   "main": "lib/index.js",
   "files": [
@@ -73,14 +73,14 @@
     "typescript": "^2.6.2",
     "vue": "^2.5.9",
     "vue-class-component": "^6.1.1",
-    "vue-loader": "^13.5.0",
+    "vue-loader": "^14.1.0",
     "vue-template-compiler": "^2.5.9",
     "webpack": "^4.0.0-beta.0"
   },
   "peerDependencies": {
-    "tslint": "^5.0.0",
+    "tslint": "^4.0.0 || ^5.0.0",
     "typescript": "^2.1.0",
-    "webpack": "^2.3.0 || ^3.0.0"
+    "webpack": "^2.3.0 || ^3.0.0 || ^4.0.0"
   },
   "dependencies": {
     "babel-code-frame": "^6.22.0",

src/VueProgram.ts

@@ -31,24 +31,43 @@ class VueProgram {
   }
 
   /**
-   * Since 99.9% of Vue projects use the wildcard '@/*', we only search for that in tsconfig CompilerOptions.paths.
+   * Search for default wildcard or wildcard from options, 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 discardedSymbols = ['.', '..', '/'];
+    const wildcards: string[] = [];
+
+    if (options.paths) {
+      Object.keys(options.paths).forEach(key => {
+        const pathSymbol = key[0];
+        if (discardedSymbols.indexOf(pathSymbol) < 0 && wildcards.indexOf(pathSymbol) < 0) {
+          wildcards.push(pathSymbol);
+        }
+      });
+    } else {
+      wildcards.push('@');
+    }
+
     const isRelative = !path.isAbsolute(moduleName);
+    let correctWildcard;
 
-    if (isWildcard) {
+    wildcards.forEach(wildcard => {
+      if (moduleName.substr(0, 2) === `${wildcard}/`) {
+        correctWildcard = wildcard;
+      }
+    });
+
+    if (correctWildcard) {
+      const pattern = options.paths ? options.paths[`${correctWildcard}/*`] : undefined;
+      const substitution = pattern ? options.paths[`${correctWildcard}/*`][0].replace('*', '') : 'src';
       moduleName = path.resolve(baseUrl, substitution, moduleName.substr(2));
     } else if (isRelative) {
       moduleName = path.resolve(path.dirname(containingFile), moduleName);
     }
-
     return moduleName;
   }
 
@@ -66,6 +85,19 @@ class VueProgram {
     const host = ts.createCompilerHost(programConfig.options);
     const realGetSourceFile = host.getSourceFile;
 
+    const getScriptKind = (lang: string) => {
+      if (lang === "ts") {
+        return ts.ScriptKind.TS;
+      } else if (lang === "tsx") {
+        return ts.ScriptKind.TSX;
+      } else if (lang === "jsx") {
+        return ts.ScriptKind.JSX;
+      } else {
+        // when lang is "js" or no lang specified
+        return ts.ScriptKind.JS;
+      }
+    }
+
     // 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
@@ -91,8 +123,21 @@ class VueProgram {
 
       // get typescript contents from Vue file
       if (source && VueProgram.isVue(filePath)) {
-        const parsed = vueParser.parse(source.text, 'script', { lang: ['ts', 'tsx', 'js', 'jsx'] });
-        source = ts.createSourceFile(filePath, parsed, languageVersion, true);
+        let parsed: string;
+        let kind: ts.ScriptKind;
+        for (const lang of ['ts', 'tsx', 'js', 'jsx']) {
+          parsed = vueParser.parse(source.text, 'script', { lang: [lang], emptyExport: false });
+          if (parsed) {
+            kind = getScriptKind(lang);
+            break;
+          }
+        }
+        if (!parsed) {
+          // when script tag has no lang, or no script tag given
+          parsed = vueParser.parse(source.text, 'script');
+          kind = ts.ScriptKind.JS;
+        }
+        source = ts.createSourceFile(filePath, parsed, languageVersion, true, kind);
       }
 
       return source;
@@ -104,13 +149,29 @@ class VueProgram {
 
       for (const moduleName of moduleNames) {
         // Try to use standard resolution.
-        const result = ts.resolveModuleName(moduleName, containingFile, programConfig.options, {
-          fileExists: host.fileExists,
-          readFile: host.readFile
+        const { resolvedModule } = ts.resolveModuleName(moduleName, containingFile, programConfig.options, {
+          fileExists(fileName) {
+            if (fileName.endsWith('.vue.ts')) {
+              return host.fileExists(fileName.slice(0, -3)) || host.fileExists(fileName);
+            } else {
+              return host.fileExists(fileName);
+            }
+          },
+          readFile(fileName) {
+            // This implementation is not necessary. Just for consistent behavior.
+            if (fileName.endsWith('.vue.ts') && !host.fileExists(fileName)) {
+              return host.readFile(fileName.slice(0, -3));
+            } else {
+              return host.readFile(fileName);
+            }
+          }
         });
 
-        if (result.resolvedModule) {
-          resolvedModules.push(result.resolvedModule);
+        if (resolvedModule) {
+          if (resolvedModule.resolvedFileName.endsWith('vue.ts') && !host.fileExists(resolvedModule.resolvedFileName)) {
+            resolvedModule.resolvedFileName = resolvedModule.resolvedFileName.slice(0, -3);
+          }
+          resolvedModules.push(resolvedModule);
         } else {
           // For non-ts extensions.
           const absolutePath = VueProgram.resolveNonTsModuleName(moduleName, containingFile, basedir, programConfig.options);

test/integration/vue.spec.js

@@ -135,7 +135,7 @@ describe('[INTEGRATION] vue', function () {
     createCompiler({ tslint: true, vue: true });
 
     compiler.run(function(error, stats) {
-      expect(stats.compilation.errors.length).to.be.equal(2);
+      expect(stats.compilation.errors.length).to.be.equal(1);
       callback();
     });
   });
@@ -144,8 +144,133 @@ describe('[INTEGRATION] vue', function () {
     createCompiler({ tslint: true, vue: true, checkSyntacticErrors: true });
 
     compiler.run(function(error, stats) {
-      expect(stats.compilation.errors.length).to.be.equal(3);
+      expect(stats.compilation.errors.length).to.be.equal(2);
       callback();
     });
   });
-});
+
+  [
+    'example-ts.vue',
+    'example-tsx.vue',
+    'example-js.vue',
+    'example-jsx.vue',
+    'example-nolang.vue'
+  ].forEach(fileName => {
+    it('should be able to extract script from ' + fileName, function () {
+      createCompiler({ vue: true, tsconfig: 'tsconfig-langs.json' });
+      var sourceFilePath = path.resolve(compiler.context, 'src/langs/' + fileName)
+      var source = checker.program.getSourceFile(sourceFilePath);
+      expect(source).to.not.be.undefined;
+      // remove padding lines
+      var text = source.text.replace(/^\s*\/\/.*$\n/gm, '');
+      expect(text.startsWith('/* OK */')).to.be.true;
+    });
+  });
+
+  function groupByFileName(errors) {
+    var ret = {
+      'example-ts.vue': [],
+      'example-tsx.vue': [],
+      'example-js.vue': [],
+      'example-jsx.vue': [],
+      'example-nolang.vue': []
+    };
+    for (var error of errors) {
+      ret[path.basename(error.file)].push(error);
+    }
+    return ret;
+  }
+
+  describe('should be able to compile *.vue with each lang', function () {
+    var errors;
+    before(function(callback) {
+      createCompiler({ vue: true, tsconfig: 'tsconfig-langs.json' });
+      compiler.run(function(error, stats) {
+        errors = groupByFileName(stats.compilation.errors);
+        callback();
+      });
+    });
+    it("lang=ts", function() {
+      expect(errors['example-ts.vue'].length).to.be.equal(0);
+    })
+    it("lang=tsx", function() {
+      expect(errors['example-tsx.vue'].length).to.be.equal(0);
+    });
+    it("lang=js", function() {
+      expect(errors['example-js.vue'].length).to.be.equal(0);
+    });
+    it("lang=jsx", function() {
+      expect(errors['example-jsx.vue'].length).to.be.equal(0);
+    });
+    it("no lang", function() {
+      expect(errors['example-nolang.vue'].length).to.be.equal(0);
+    });
+  });
+
+  describe('should be able to detect errors in *.vue', function () {
+    var errors;
+    before(function(callback) {
+      // tsconfig-langs-strict.json === tsconfig-langs.json + noUnusedLocals
+      createCompiler({ vue: true, tsconfig: 'tsconfig-langs-strict.json' });
+      compiler.run(function(error, stats) {
+        errors = groupByFileName(stats.compilation.errors);
+        callback();
+      });
+    });
+    it("lang=ts", function() {
+      expect(errors['example-ts.vue'].length).to.be.equal(1);
+      expect(errors['example-ts.vue'][0].rawMessage).to.match(/'a' is declared but/);
+    })
+    it("lang=tsx", function() {
+      expect(errors['example-tsx.vue'].length).to.be.equal(1);
+      expect(errors['example-tsx.vue'][0].rawMessage).to.match(/'a' is declared but/);
+    });
+    it("lang=js", function() {
+      expect(errors['example-js.vue'].length).to.be.equal(0);
+    });
+    it("lang=jsx", function() {
+      expect(errors['example-jsx.vue'].length).to.be.equal(0);
+    });
+    it("no lang", function() {
+      expect(errors['example-nolang.vue'].length).to.be.equal(0);
+    });
+  });
+
+  describe('should resolve *.vue in the same way as TypeScript', function() {
+    var errors;
+    before(function(callback) {
+      createCompiler({ vue: true, tsconfig: 'tsconfig-imports.json' });
+      compiler.run(function(error, stats) {
+        errors = stats.compilation.errors;
+        callback();
+      });
+    });
+
+    it('should be able to import by relative path', function() {
+      expect(
+        errors.filter(e => e.rawMessage.indexOf('./Component1.vue') >= 0).length
+      ).to.be.equal(0);
+    });
+    it('should be able to import by path from baseUrl', function() {
+      expect(
+        errors.filter(e => e.rawMessage.indexOf('imports/Component2.vue') >= 0).length
+      ).to.be.equal(0);
+    });
+    it('should be able to import by compilerOptions.paths setting', function() {
+      expect(
+        errors.filter(e => e.rawMessage.indexOf('@/Component3.vue') >= 0).length
+      ).to.be.equal(0);
+    });
+    it('should be able to import by compilerOptions.paths setting (by array)', function() {
+      expect(
+        errors.filter(e => e.rawMessage.indexOf('foo/Foo1.vue') >= 0).length
+      ).to.be.equal(0);
+      expect(
+        errors.filter(e => e.rawMessage.indexOf('foo/Foo2.vue') >= 0).length
+      ).to.be.equal(0);
+    });
+    it('should not report any compilation errors', function() {
+      expect(errors.length).to.be.equal(0);
+    });
+  });
+});

test/integration/vue/src/imports/Component1.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This is Component1</div>
+</template>

test/integration/vue/src/imports/Component2.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This is Component2</div>
+</template>

test/integration/vue/src/imports/Component3.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This is Component3</div>
+</template>

test/integration/vue/src/imports/Test.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+// resolve by relative path
+import Component1 from "./Component1.vue";            // imports/Component1.vue
+
+// resolve by path from baseUrl(./src)
+import Component2 from "imports/Component2.vue";      // imports/Component2.vue
+
+// resolve by compilerOptions.paths
+//  { "@/*": ["imports/*"] }
+import Component3 from "@/Component3.vue";            // imports/Component3.vue
+
+// resolve by compilerOptions.paths
+// { "foo/*": ["imports/foo1/*", "imports/foo2/*"] }
+import Foo1 from "foo/Foo1.vue";                      // imports/foo1/Foo1.vue
+import Foo2 from "foo/Foo2.vue";                      // imports/foo2/Foo2.vue
+
+export default {
+  name: "ImportTest",
+  components: {
+    Component1,
+    Component2,
+    Component3,
+    Foo1,
+    Foo2
+  }
+};
+</script>
+

test/integration/vue/src/imports/foo1/Foo1.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This is Foo1</div>
+</template>