Merge pull request TypeStrong#94 from wonderful-panda/improve-vue-module-resolution

Improve module resolution of *.vue

Author: piotr-oles

src/VueProgram.ts

@@ -149,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

@@ -234,4 +234,42 @@ describe('[INTEGRATION] vue', 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>

test/integration/vue/src/imports/foo2/Foo2.vue

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

test/integration/vue/tsconfig-imports.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+      "baseUrl": "./src",
+      "moduleResolution": "node",
+      "paths": {
+          "@/*": ["imports/*"],
+          "foo/*": [
+              "imports/foo1/*",
+              "imports/foo2/*"
+          ]
+      }
+  },
+  "include": [
+      "imports/Test.vue"
+  ],
+  "exclude": [
+      "node_modules"
+  ]
+}