build: Return array of resolved secondary entry points (#2149)

- Bump to latest `@rollup/plugin-alias`
- Cleanup and compatibility fixes with rollup alias
- Re-enable source maps during `terserjs.minify()`
- Use variable to pass required MDC version during a build

Author: trimox

build-config.js

@@ -10,10 +10,16 @@ const packageJson = require('./package.json');
 const buildVersion = packageJson.version;
 
 /**
- * Required Angular version for all Angular Material packages. This version will be used
+ * Required Angular version for all Angular MDC packages. This version will be used
  * as the peer dependency version for Angular in all release packages.
  */
- const angularVersion = packageJson.requiredAngularVersion;
+const angularVersion = packageJson.requiredAngularVersion;
+
+/**
+* Required MDC Web version for all Angular MDC packages. This version will be used
+* as the peer dependency version for MDC Web in all release packages that require MDC Web.
+*/
+const mdcVersion = packageJson.requiredMDCVersion;
 
 /** License that will be placed inside of all created bundles. */
 const buildLicense = `/**
@@ -27,6 +33,7 @@ const buildLicense = `/**
 module.exports = {
   projectVersion: buildVersion,
   angularVersion: angularVersion,
+  mdcVersion: mdcVersion,
   projectDir: __dirname,
   packagesDir: join(__dirname, 'packages'),
   outputDir: join(__dirname, 'dist'),

package.json

@@ -14,6 +14,7 @@
     "yarn": ">= 1.19.1"
   },
   "requiredAngularVersion": "^9.0.0",
+  "requiredMDCVersion": "^5.1.0",
   "scripts": {
     "build": "gulp web:build",
     "build:release": "gulp web:build-release",
@@ -31,9 +32,8 @@
     "@angular/core": "^9.0.4",
     "@angular/forms": "^9.0.4",
     "@angular/platform-browser": "^9.0.4",
-    "core-js": "2.6.9",
+    "core-js": "^2.6.9",
     "material-components-web": "^5.1.0",
-    "rollup-plugin-alias": "1.5.2",
     "rxjs": "^6.5.3",
     "tsickle": "0.38.0",
     "tslib": "1.11.1",
@@ -44,6 +44,7 @@
     "@angular/platform-browser-dynamic": "^9.0.4",
     "@babel/core": "^7.8.6",
     "@babel/preset-env": "^7.8.6",
+    "@rollup/plugin-alias": "^3.0.1",
     "@rollup/plugin-node-resolve": "7.1.1",
     "@types/fs-extra": "^8.1.0",
     "@types/glob": "^7.1.1",

packages/package.json

@@ -23,7 +23,7 @@
   "private": false,
   "dependencies": {
     "@angular-mdc/theme": "0.0.0-PLACEHOLDER",
-    "material-components-web": "^5.1.0",
+    "material-components-web": "0.0.0-MDC",
     "@angular/cdk": "^9.1.0"
   },
   "peerDependencies": {

packages/tsconfig-build.json

@@ -24,6 +24,7 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
+      "@angular-mdc/web": ["../dist/packages/web"],
       "@angular-mdc/web/*": ["../dist/packages/web/*"]
     }
   },

tools/package-tools/build-bundles.ts

@@ -8,8 +8,8 @@ import {remapSourcemap} from './sourcemap-remap';
 
 // There are no type definitions available for these imports.
 const rollup = require('rollup');
-const rollupNodeResolutionPlugin = require('@rollup/plugin-node-resolve');
-const rollupAlias = require('rollup-plugin-alias');
+const rollupNodeResolve = require('@rollup/plugin-node-resolve');
+const rollupAlias = require('@rollup/plugin-alias');
 const babel = require('rollup-plugin-babel');
 
 /** Directory where all bundles will be created in. */
@@ -20,13 +20,13 @@ export class PackageBundler {
   /** Name of the AMD module for the primary entry point of the build package. */
   private readonly primaryAmdModuleName: string;
 
-  constructor(private buildPackage: BuildPackage) {
-    this.primaryAmdModuleName = this.getAmdModuleName(buildPackage.name);
+  constructor(private _buildPackage: BuildPackage) {
+    this.primaryAmdModuleName = this._getAmdModuleName(_buildPackage.name);
   }
 
   /** Creates all bundles for the package and all associated entry points (UMD, ES5, ES2015). */
   async createBundles() {
-    for (const entryPoint of this.buildPackage.secondaryEntryPoints) {
+    for (const entryPoint of this._buildPackage.secondaryEntryPoints) {
       await this.bundleSecondaryEntryPoint(entryPoint);
     }
 
@@ -35,11 +35,11 @@ export class PackageBundler {
 
   /** Bundles the primary entry-point w/ given entry file, e.g. @angular-mdc/web */
   private async bundlePrimaryEntryPoint() {
-    const packageName = this.buildPackage.name;
+    const packageName = this._buildPackage.name;
 
     return this.bundleEntryPoint({
-      entryFile: this.buildPackage.entryFilePath,
-      esm5EntryFile: join(this.buildPackage.esm5OutputDir, 'index.js'),
+      entryFile: this._buildPackage.entryFilePath,
+      esm5EntryFile: join(this._buildPackage.esm5OutputDir, 'index.js'),
       importName: `@angular-mdc/${packageName}`,
       moduleName: this.primaryAmdModuleName,
       esm2015Dest: join(bundlesDir, `${packageName}.js`),
@@ -51,15 +51,15 @@ export class PackageBundler {
 
   /** Bundles a single secondary entry-point w/ given entry file, e.g. @angular-mdc/web/button */
   private async bundleSecondaryEntryPoint(entryPointName: string) {
-    const packageName = this.buildPackage.name;
-    const entryFile = join(this.buildPackage.outputDir, entryPointName, 'index.js');
-    const esm5EntryFile = join(this.buildPackage.esm5OutputDir, entryPointName, 'index.js');
+    const packageName = this._buildPackage.name;
+    const entryFile = join(this._buildPackage.outputDir, entryPointName, 'index.js');
+    const esm5EntryFile = join(this._buildPackage.esm5OutputDir, entryPointName, 'index.js');
 
     return this.bundleEntryPoint({
       entryFile,
       esm5EntryFile,
       importName: `@angular-mdc/${packageName}/${entryPointName}`,
-      moduleName: this.getAmdModuleName(packageName, entryPointName),
+      moduleName: this._getAmdModuleName(packageName, entryPointName),
       esm2015Dest: join(bundlesDir, `${packageName}`, `${entryPointName}.js`),
       esm5Dest: join(bundlesDir, `${packageName}`, `${entryPointName}.es5.js`),
       umdDest: join(bundlesDir, `${packageName}-${entryPointName}.umd.js`),
@@ -70,7 +70,7 @@ export class PackageBundler {
   /**
    * Creates the ES5, ES2015, and UMD bundles for the specified entry-point.
    * @param config Configuration that specifies the entry-point, module name, and output
-   *     bundle paths.
+   * bundle paths.
    */
   private async bundleEntryPoint(config: BundlesConfig) {
     // Build FESM-2015 bundle file.
@@ -107,7 +107,6 @@ export class PackageBundler {
     await remapSourcemap(config.esm2015Dest);
     await remapSourcemap(config.esm5Dest);
     await remapSourcemap(config.umdDest);
-    // await remapSourcemap(config.umdMinDest);
   }
 
   /** Creates a rollup bundle of a specified JavaScript file.*/
@@ -164,7 +163,7 @@ export class PackageBundler {
     // For UMD bundles, we need to adjust the `external` bundle option in order to include
     // all necessary code in the bundle.
     if (config.format === 'umd') {
-      bundleOptions.plugins.push(rollupNodeResolutionPlugin());
+      bundleOptions.plugins.push(rollupNodeResolve());
       // For all UMD bundles, we want to exclude tslib from the `external` bundle option so that
       // it is inlined into the bundle.
       let external = Object.keys(rollupGlobals);
@@ -173,17 +172,18 @@ export class PackageBundler {
       // If each secondary entry-point is re-exported at the root, we want to exclude those
       // secondary entry-points from the rollup globals because we want the UMD for the
       // primary entry-point to include *all* of the sources for those entry-points.
-      if (this.buildPackage.exportsSecondaryEntryPointsAtRoot &&
+      if (this._buildPackage.exportsSecondaryEntryPointsAtRoot &&
         config.moduleName === this.primaryAmdModuleName) {
 
-        const importRegex = new RegExp(`@angular-mdc/${this.buildPackage.name}/.+`);
+        const importRegex = new RegExp(`@angular-mdc/${this._buildPackage.name}/.+`);
         external = external.filter(e => !importRegex.test(e));
 
         // Use the rollup-alias plugin to map imports of the form `@angular-mdc/web/button`
         // to the actual file location so that rollup can resolve the imports (otherwise they
         // will be treated as external dependencies and not included in the bundle).
-        bundleOptions.plugins.push(
-          rollupAlias(this.getResolvedSecondaryEntryPointImportPaths(config.dest)));
+        bundleOptions.plugins.push(rollupAlias({
+          entries: this._getResolvedSecondaryEntryPointImportPaths(config.dest)
+        }));
       }
       bundleOptions.external = external;
     }
@@ -192,24 +192,25 @@ export class PackageBundler {
   }
 
   /**
-   * Gets mapping of import aliases (e.g. `@angular-mdc/web/button`) to the path of the es5
+   * Gets array of import aliases (e.g. `@angular-mdc/web/button`) with the path of the es5
    * bundle output.
    * @param bundleOutputDir Path to the bundle output directory.
-   * @returns Map of alias to resolved path.
+   * @returns Array of alias with resolved path.
    */
-  private getResolvedSecondaryEntryPointImportPaths(bundleOutputDir: string) {
-    return this.buildPackage.secondaryEntryPoints.reduce((map, p) => {
-      map[`@angular-mdc/${this.buildPackage.name}/${p}`] =
-        join(dirname(bundleOutputDir), this.buildPackage.name, `${p}.es5.js`);
-      return map;
-    }, {} as {[key: string]: string});
+  private _getResolvedSecondaryEntryPointImportPaths(bundleOutputDir: string) {
+    return this._buildPackage.secondaryEntryPoints.map(p => {
+      return {
+        find: `@angular-mdc/${this._buildPackage.name}/${p}`,
+        replacement: join(dirname(bundleOutputDir), this._buildPackage.name, `${p}.es5.js`)
+      };
+    });
   }
 
   /**
    * Gets the AMD module name for a package and an optional entry point. This is consistent
    * to the module name format being used in "angular/angular".
    */
-  private getAmdModuleName(packageName: string, entryPointName?: string) {
+  private _getAmdModuleName(packageName: string, entryPointName?: string) {
     let amdModuleName = `ng.${dashCaseToCamelCase(packageName)}`;
 
     if (entryPointName) {

tools/package-tools/build-config.ts

@@ -5,6 +5,8 @@ export interface BuildConfig {
   projectVersion: string;
   /** Required Angular version for the project. */
   angularVersion: string;
+  /** Required MDC Web version for the project. */
+  mdcVersion: string;
   /** Path to the root of the project. */
   projectDir: string;
   /** Path to the directory where all packages are living. */
@@ -18,10 +20,5 @@ export interface BuildConfig {
 // Search for a build config by walking up the current working directory of the Node process.
 const buildConfigPath = findBuildConfig();
 
-if (!buildConfigPath) {
-  throw 'Angular MDC build tools were not able to find a build config. ' +
-  'Please create a "build-config.js" file in your project.';
-}
-
 // Load the config file using a basic CommonJS import.
 export const buildConfig = require(buildConfigPath) as BuildConfig;

tools/package-tools/compile-entry-point.ts

@@ -51,6 +51,7 @@ function addIdToGlob(outputPath: string, entryPointId: number): void {
     fileContent = fileContent.replace(/ɵ(ɵ)?[a-z]+/g,
       (match, isDoubleTheta) => {
         return isDoubleTheta ? match : match + entryPointId;
-      }); writeFileSync(filePath, fileContent, 'utf-8');
+      });
+      writeFileSync(filePath, fileContent, 'utf-8');
   });
 }

tools/package-tools/copy-files.ts

@@ -1,10 +1,10 @@
-import { sync as glob } from 'glob';
-import { mkdirpSync, copySync } from 'fs-extra';
-import { join, dirname } from 'path';
+import {sync as glob} from 'glob';
+import {mkdirpSync, copySync} from 'fs-extra';
+import {join, dirname} from 'path';
 
 /** Function to copy files that match a glob to another directory. */
 export function copyFiles(fromPath: string, fileGlob: string, outDir: string) {
-  glob(fileGlob, { cwd: fromPath }).forEach(filePath => {
+  glob(fileGlob, {cwd: fromPath}).forEach(filePath => {
     const fileDestPath = join(outDir, filePath);
     mkdirpSync(dirname(fileDestPath));
     copySync(join(fromPath, filePath), fileDestPath);

tools/package-tools/entry-point-package-json.ts

@@ -1,5 +1,5 @@
-import { join } from 'path';
-import { writeFileSync } from 'fs';
+import {join} from 'path';
+import {writeFileSync} from 'fs';
 
 /** Creates a package.json for a secondary entry-point with the different bundle locations. */
 export function createEntryPointPackageJson(destDir: string, packageName: string,

tools/package-tools/find-build-config.ts

@@ -1,5 +1,5 @@
-import { resolve, dirname, join } from 'path';
-import { existsSync } from 'fs';
+import {resolve, dirname, join} from 'path';
+import {existsSync} from 'fs';
 
 /** Name of the build config file. */
 const BUILD_CONFIG_FILENAME = 'build-config.js';

tools/package-tools/metadata-inlining.ts

@@ -1,6 +1,6 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { sync as glob } from 'glob';
-import { basename, join } from 'path';
+import {readFileSync, writeFileSync} from 'fs';
+import {sync as glob} from 'glob';
+import {basename, join} from 'path';
 
 /**
  * Recurse through a parsed metadata.json file and inline all html and css.

tools/package-tools/metadata-reexport.ts

@@ -1,5 +1,5 @@
-import { writeFileSync } from 'fs';
-import { join } from 'path';
+import {writeFileSync} from 'fs';
+import {join} from 'path';
 
 /** Creates a metadata file that re-exports the metadata bundle inside of the typings. */
 export function createMetadataReexportFile(destDir: string, from: string | string[],
@@ -10,7 +10,7 @@ export function createMetadataReexportFile(destDir: string, from: string | strin
     __symbolic: 'module',
     version: 3,
     metadata: {},
-    exports: from.map(f => ({ from: f })),
+    exports: from.map(f => ({from: f})),
     flatModuleIndexRedirect: true,
     importAs: importAsName
   }, null, 2);

tools/package-tools/minify-sources.ts

@@ -5,13 +5,13 @@ const terser = require('terser');
 
 /** Minifies a JavaScript file by using terser-js. Also writes sourcemaps to the output. */
 export function terserJs(inputPath: string, outputPath: string) {
-  // const sourceMapPath = `${outputPath}.map`;
+  const sourceMapPath = `${outputPath}.map`;
 
   const result = terser.minify(readFileSync(inputPath, 'utf8'), {
-    // sourceMap: {
-    //   content: `${inputPath}.map`,
-    //   url: sourceMapPath
-    // },
+    sourceMap: {
+      filename: `${inputPath}.map`,
+      url: sourceMapPath
+    },
     output: {
       comments: 'some'
     }
@@ -20,5 +20,5 @@ export function terserJs(inputPath: string, outputPath: string) {
   // console.log(result.error); // runtime error, `undefined` in this case
   // console.log(result.warnings); // [ 'Dropping unused variable u [0:1,18]' ]
   writeFileSync(outputPath, result.code);
-  // writeFileSync(sourceMapPath, result.map);
+  writeFileSync(sourceMapPath, result.map);
 }

tools/package-tools/secondary-entry-points.ts

@@ -1,8 +1,8 @@
-import { join } from 'path';
-import { readdirSync, lstatSync, existsSync } from 'fs';
-import { spawnSync } from 'child_process';
-import { BuildPackage } from './build-package';
-import { platform } from 'os';
+import {join} from 'path';
+import {readdirSync, lstatSync, existsSync} from 'fs';
+import {spawnSync} from 'child_process';
+import {BuildPackage} from './build-package';
+import {platform} from 'os';
 
 /**
  * Gets secondary entry-points for a given package in the order they should be built.
@@ -23,7 +23,7 @@ export function getSecondaryEntryPointsForPackage(pkg: BuildPackage) {
     .filter(d => existsSync(join(packageDir, d, 'tsconfig-build.json')));
 
   // Create nodes that comprise the build graph.
-  const buildNodes: BuildNode[] = entryPoints.map(p => ({ name: p, deps: [], depth: 0 }));
+  const buildNodes: BuildNode[] = entryPoints.map(p => ({name: p, deps: [], depth: 0}));
 
   // Create a lookup for name -> build graph node.
   const nodeLookup = buildNodes.reduce((lookup, node) => {

tools/package-tools/ts-compile.ts

@@ -7,7 +7,7 @@ import {spawn} from 'child_process';
  * @param flags Command-line flags to be passed to binary.
  * @returns Promise that resolves/rejects when the child process exits.
  */
-export function tsCompile(binary: 'tsc' | 'ngc', flags: string[]) {
+export function tsCompile(binary: 'ngc', flags: string[]) {
   return new Promise((resolve, reject) => {
     const binaryPath = resolvePath(`./node_modules/.bin/${binary}`);
     const childProcess = spawn(binaryPath, flags, {shell: true});

tools/package-tools/typings-reexport.ts

@@ -1,6 +1,6 @@
-import { writeFileSync } from 'fs';
-import { buildConfig } from './build-config';
-import { join } from 'path';
+import {writeFileSync} from 'fs';
+import {buildConfig} from './build-config';
+import {join} from 'path';
 
 /** Create a typing file that links to the bundled definitions of NGC. */
 export function createTypingsReexportFile(outDir: string, from: string, fileName: string) {