build: add path mapping support to broccoli typescript

Author: hansl

lib/broccoli/angular-broccoli-sass.js

@@ -35,7 +35,13 @@ class SASSPlugin extends Plugin {
 
   compile(fileName, inputPath, outputPath) {
     const outSourceName = fileName.replace(inputPath, outputPath);
-    const outFileName = outSourceName.replace(/\.s[ac]ss$/, '.css');
+    let outFileName = outSourceName.replace(/\.s[ac]ss$/, '.css');
+    if (this.options.getDestinationPath) {
+      let tmpFileName = this.options.getDestinationPath(path.relative(outputPath, outFileName));
+      if (tmpFileName) {
+        outFileName = path.join(outputPath, tmpFileName);
+      }
+    }
 
     // We overwrite file, outFile and include the file path for the includePath.
     // We also make sure the options don't include a data field.

lib/broccoli/angular2-app.js

@@ -371,8 +371,18 @@ class Angular2App extends BroccoliPlugin {
    * @return {Tree} The assets tree.
    */
   _getAssetsTree() {
+    const getDestinationPath = (name) => {
+      if (this._options.assets && this._options.assets.getDestinationPath) {
+        name = this._options.assets.getDestinationPath(name);
+      }
+      if (name.startsWith(this._sourceDir)) {
+        return name.substr(this._sourceDir.length);
+      } else {
+        return name;
+      }
+    };
+
     return new BroccoliFunnel(this._inputNode, {
-      srcDir: this._sourceDir,
       exclude: [
         '**/*.ts',
         '**/*.scss',
@@ -381,6 +391,7 @@ class Angular2App extends BroccoliPlugin {
         '**/*.styl',
         '**/tsconfig.json'
       ],
+      getDestinationPath: getDestinationPath,
       allowEmpty: true
     });
   }

lib/broccoli/broccoli-typescript.js

@@ -76,7 +76,11 @@ class BroccoliTypeScriptCompiler extends Plugin {
       } else if (this._fileRegistry[tsFilePath].version >= entry.mtime) {
         // Nothing to do for this file. Just link the cached outputs.
         this._fileRegistry[tsFilePath].outputs.forEach(absoluteFilePath => {
-          const outputFilePath = absoluteFilePath.replace(this.cachePath, this.outputPath);
+          let outputFilePath = absoluteFilePath.replace(this.cachePath, this.outputPath);
+          if (this._options.getDestinationPath) {
+            const tmpOutputPath = this._options.getDestinationPath(path.relative(this.outputPath, outputFilePath));
+            outputFilePath = tmpOutputPath ? path.join(this.outputPath, tmpOutputPath) : outputFilePath;
+          }
           fse.mkdirsSync(path.dirname(outputFilePath));
           fs.symlinkSync(absoluteFilePath, outputFilePath);
         });
@@ -159,12 +163,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());
   }
 
@@ -190,7 +196,11 @@ class BroccoliTypeScriptCompiler extends Plugin {
     absoluteFilePath = path.resolve(this.cachePath, absoluteFilePath);
     // Replace the input path by the output.
     absoluteFilePath = absoluteFilePath.replace(this.inputPaths[0], this.cachePath);
-    const outputFilePath = absoluteFilePath.replace(this.cachePath, this.outputPath);
+    let outputFilePath = absoluteFilePath.replace(this.cachePath, this.outputPath);
+    if (this._options.getDestinationPath) {
+      const tmpOutputPath = this._options.getDestinationPath(path.relative(this.outputPath, outputFilePath));
+      outputFilePath = tmpOutputPath ? path.join(this.outputPath, tmpOutputPath) : outputFilePath;
+    }
 
     if (registry) {
       registry.outputs.add(absoluteFilePath);
@@ -249,13 +259,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 +284,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 +382,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);
+  });
 });