build: add path mapping support to broccoli typescript

Author: hansl

lib/broccoli/broccoli-typescript.js

@@ -159,12 +159,14 @@ class BroccoliTypeScriptCompiler extends Plugin {
 
     this._tsConfigFiles = tsconfig.files.splice(0);
 
-    this._tsOpts = ts.convertCompilerOptionsFromJson(tsconfig.compilerOptions, '', null).options;
+    this._tsOpts = ts.convertCompilerOptionsFromJson(tsconfig['compilerOptions'],
+      this.inputPaths[0], this._tsConfigPath).options;
     this._tsOpts.rootDir = '';
     this._tsOpts.outDir = '';
 
     this._tsServiceHost = new CustomLanguageServiceHost(
-      this._tsOpts, this._rootFilePaths, this._fileRegistry, this.inputPaths[0]);
+      this._tsOpts, this._rootFilePaths, this._fileRegistry, this.inputPaths[0],
+      tsconfig['compilerOptions'].paths, this._tsConfigPath);
     this._tsService = ts.createLanguageService(this._tsServiceHost, ts.createDocumentRegistry());
   }
 
@@ -249,13 +251,15 @@ class BroccoliTypeScriptCompiler extends Plugin {
 }
 
 class CustomLanguageServiceHost {
-  constructor(compilerOptions, fileNames, fileRegistry, treeInputPath) {
+  constructor(compilerOptions, fileNames, fileRegistry, treeInputPath, paths, tsConfigPath) {
     this.compilerOptions = compilerOptions;
     this.fileNames = fileNames;
     this.fileRegistry = fileRegistry;
     this.treeInputPath = treeInputPath;
     this.currentDirectory = treeInputPath;
     this.defaultLibFilePath = ts.getDefaultLibFilePath(compilerOptions).replace(/\\/g, '/');
+    this.paths = paths;
+    this.tsConfigPath = tsConfigPath;
     this.projectVersion = 0;
   }
 
@@ -272,23 +276,87 @@ class CustomLanguageServiceHost {
     return this.projectVersion.toString();
   }
 
-  /**
-   * This method is called quite a bit to lookup 3 kinds of paths:
-   * 1/ files in the fileRegistry
-   *   - these are the files in our project that we are watching for changes
-   *   - in the future we could add caching for these files and invalidate the cache when
-   *     the file is changed lazily during lookup
-   * 2/ .d.ts and library files not in the fileRegistry
-   *   - these are not our files, they come from tsd or typescript itself
-   *   - these files change only rarely but since we need them very rarely, it's not worth the
-   *     cache invalidation hassle to cache them
-   * 3/ bogus paths that typescript compiler tries to lookup during import resolution
-   *   - these paths are tricky to cache since files come and go and paths that was bogus in the
-   *     past might not be bogus later
-   *
-   * In the initial experiments the impact of this caching was insignificant (single digit %) and
-   * not worth the potential issues with stale cache records.
-   */
+  _resolveModulePathWithMapping(moduleName) {
+    // check if module name should be used as-is or it should be mapped to different value
+    let longestMatchedPrefixLength = 0;
+    let matchedPattern;
+    let matchedWildcard;
+    const paths = this.paths || {};
+
+    for (let pattern of Object.keys(paths)) {
+      if (pattern.indexOf('*') != pattern.lastIndexOf('*')) {
+        throw `Invalid path mapping pattern: "${pattern}"`;
+      }
+
+      let indexOfWildcard = pattern.indexOf('*');
+      if (indexOfWildcard !== -1) {
+        // check if module name starts with prefix, ends with suffix and these two don't overlap
+        let prefix = pattern.substr(0, indexOfWildcard);
+        let suffix = pattern.substr(indexOfWildcard + 1);
+        if (moduleName.length >= prefix.length + suffix.length &&
+          moduleName.startsWith(prefix) &&
+          moduleName.endsWith(suffix)) {
+
+          // use length of matched prefix as betterness criteria
+          if (longestMatchedPrefixLength < prefix.length) {
+            longestMatchedPrefixLength = prefix.length;
+            matchedPattern = pattern;
+            matchedWildcard = moduleName.substr(prefix.length, moduleName.length - suffix.length);
+          }
+        }
+      } else {
+        // Pattern does not contain asterisk - module name should exactly match pattern to succeed.
+        if (pattern === moduleName) {
+          matchedPattern = pattern;
+          matchedWildcard = undefined;
+          break;
+        }
+      }
+    }
+
+    if (!matchedPattern) {
+      // We fallback to the old module resolution.
+      return undefined;
+      // // no pattern was matched so module name can be used as-is
+      // let p = path.join(this.treeInputPath, moduleName);
+      // return fs.existsSync(p) ? p : undefined;
+    }
+
+    // some pattern was matched - module name needs to be substituted
+    let substitutions = this.paths[matchedPattern];
+    for (let subst of substitutions) {
+      if (subst.indexOf('*') != subst.lastIndexOf('*')) {
+        throw `Invalid substitution: "${subst}" for pattern "${matchedPattern}".`;
+      }
+      // replace * in substitution with matched wildcard
+      let p = matchedWildcard ? subst.replace('*', matchedWildcard) : subst;
+      // if substituion is a relative path - combine it with baseUrl
+      p = path.isAbsolute(p) ? p : path.join(this.treeInputPath, path.dirname(this.tsConfigPath), p);
+      if (fs.existsSync(p)) {
+        return p;
+      }
+    }
+
+    return undefined;
+  }
+
+  // /**
+  //  * This method is called quite a bit to lookup 3 kinds of paths:
+  //  * 1/ files in the fileRegistry
+  //  *   - these are the files in our project that we are watching for changes
+  //  *   - in the future we could add caching for these files and invalidate the cache when
+  //  *     the file is changed lazily during lookup
+  //  * 2/ .d.ts and library files not in the fileRegistry
+  //  *   - these are not our files, they come from tsd or typescript itself
+  //  *   - these files change only rarely but since we need them very rarely, it's not worth the
+  //  *     cache invalidation hassle to cache them
+  //  * 3/ bogus paths that typescript compiler tries to lookup during import resolution
+  //  *   - these paths are tricky to cache since files come and go and paths that was bogus in the
+  //  *     past might not be bogus later
+  //  *
+  //  * In the initial experiments the impact of this caching was insignificant (single digit %) and
+  //  * not worth the potential issues with stale cache records.
+  //  */
   getScriptSnapshot(tsFilePath) {
     var absoluteTsFilePath;
     if (tsFilePath == this.defaultLibFilePath || path.isAbsolute(tsFilePath)) {
@@ -306,10 +374,41 @@ class CustomLanguageServiceHost {
       // so we we just return undefined when the path is not correct.
       return undefined;
     }
-
     return ts.ScriptSnapshot.fromString(fs.readFileSync(absoluteTsFilePath, FS_OPTS));
   }
 
+  resolveModuleNames(moduleNames, containingFile)/*: ResolvedModule[]*/ {
+    return moduleNames.map((moduleName) => {
+      for (const ext of ['ts', 'd.ts']) {
+        const name = `${moduleName}.${ext}`;
+        const maybeModule = this._resolveModulePathWithMapping(name, containingFile);
+        if (maybeModule) {
+          return {
+            resolvedFileName: maybeModule,
+            isExternalLibraryImport: false
+          };
+        }
+      }
+
+      return ts.resolveModuleName(moduleName, containingFile, this.compilerOptions, {
+        fileExists(fileName) {
+          return fs.existsSync(fileName);
+        },
+        readFile(fileName) {
+          return fs.readFileSync(fileName, 'utf-8');
+        },
+        directoryExists(directoryName) {
+          try {
+            const stats = fs.statSync(directoryName);
+            return stats && stats.isDirectory();
+          } catch (e) {
+            return false;
+          }
+        }
+      }).resolvedModule;
+    });
+  }
+
   getCurrentDirectory() {
     return this.currentDirectory;
   }

tests/e2e/e2e_workflow.spec.js

@@ -315,23 +315,46 @@ describe('Basic end-to-end Workflow', function () {
     let config = require(configFilePath);
 
     config.compilerOptions.noImplicitAny = true;
-    fs.writeFileSync(configFilePath, JSON.stringify(config), 'utf8');
+    fs.writeFileSync(configFilePath, JSON.stringify(config, null, 2), 'utf8');
 
     sh.rm('-rf', path.join(process.cwd(), 'dist'));
 
     return ng(['build'])
-      .then(function () {
+      .then(() => {
         expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true);
       })
       .catch(() => {
         throw new Error('Build failed.');
       })
-      .finally(function () {
-        // Clean `tmp` folder
-        process.chdir(path.resolve(root, '..'));
-        // sh.rm('-rf', './tmp');  // tmp.teardown takes too long
-        done();
-      });
+      .finally(done);
   });
 
+  it('Turn on path mapping in tsconfig.json and rebuild', function (done) {
+    this.timeout(420000);
+
+    const configFilePath = path.join(process.cwd(), 'src', 'tsconfig.json');
+    let config = require(configFilePath);
+
+    config.compilerOptions.baseUrl = '';
+
+    // This should fail.
+    config.compilerOptions.paths = { '@angular/*': [] };
+    fs.writeFileSync(configFilePath, JSON.stringify(config, null, 2), 'utf8');
+
+    return ng(['build'])
+      .then(() => {
+        expect('build succeeded where it should have failed').to.equal('');
+      })
+      .catch(() => {})
+      .then(() => {
+        // This should succeed.
+        config.compilerOptions.paths = { '@angular/*': [ '../../node_modules/@angular/*' ] };
+        fs.writeFileSync(configFilePath, JSON.stringify(config, null, 2), 'utf8');
+      })
+      .then(() => ng(['build']))
+      .catch(() => {
+        expect('build failed where it should have succeeded').to.equal('');
+      })
+      .finally(done);
+  });
 });