build: prepare framework peer dependency and migration collection for v14 (#24492)

* build: prepare framework peer dependency and migration collection for v14

Prepares the framework peer dependency and migration collection for
v14, ensuring the release checks will not fail when we get closer
to publishing the first RC.

* build: fix chalk runtime errors due to esmodule interop

The chalk usages in the `tools/` folder seems to fail at runtime
given the `esModuleInterop` flag being enabled for the tools folder.

We need to switch the namespace imports to default imports to work
with the interop, and to follow the TS language-service recommendation
(which actually proposes switching these imports to `import c from 'chalk'`)

We should likely turn on the esmoduleinterop flag for the scripts folder as
well to have consistent imports, and to prepare for future ESM consumption
as the ecosystem moves forward.

* build: enable esmoduleinterop option in `scripts` and `.ng-dev`

Similar to the `/tsconfig.json` and the `tools/tsconfig.json`, we should
enable the `esModuleInterop` from TypeScript in the `scripts/` directory.

This is necessary to ensure that scripts part of both compilations. e.g. when
a file in `scripts/` imports from `tools/` are compatible without needing
two coordinated compilations (using e.g TS project references..). In general
enabling the interop means more consistency in the repo.

Then only remaining exception are the schematics which we can clean-up in the
future when we ship them as ES modules.

Author: devversion

.ng-dev/tsconfig.json

@@ -3,6 +3,7 @@
     "strict": true,
     "target": "es2015",
     "module": "commonjs",
+    "esModuleInterop": true,
     "noEmit": true,
     "skipLibCheck": true,
     "types": []

packages.bzl

@@ -1,7 +1,7 @@
 # Each individual package uses a placeholder for the version of Angular to ensure they're
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
-ANGULAR_PACKAGE_VERSION = "^13.0.0 || ^14.0.0"
+ANGULAR_PACKAGE_VERSION = "^14.0.0-0 || ^15.0.0"
 MDC_PACKAGE_VERSION = "14.0.0-canary.9736ddce9.0"
 TSLIB_PACKAGE_VERSION = "^2.3.0"
 RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"

scripts/breaking-changes.ts

@@ -1,7 +1,7 @@
 import {join, relative} from 'path';
 import {readFileSync} from 'fs';
-import * as chalk from 'chalk';
-import * as ts from 'typescript';
+import chalk from 'chalk';
+import ts from 'typescript';
 import * as tsutils from 'tsutils';
 
 const projectRoot = process.cwd();

scripts/check-mdc-exports.ts

@@ -1,7 +1,7 @@
 import {join} from 'path';
 import {readdirSync, existsSync} from 'fs';
-import * as ts from 'typescript';
-import * as chalk from 'chalk';
+import ts from 'typescript';
+import chalk from 'chalk';
 import {config} from './check-mdc-exports-config';
 
 // Script which ensures that a particular MDC package exports all of the same symbols as its

scripts/check-mdc-tests.ts

@@ -1,8 +1,8 @@
 import {readdirSync, readFileSync} from 'fs';
 import {join, basename} from 'path';
 import {sync as glob} from 'glob';
-import * as chalk from 'chalk';
-import * as ts from 'typescript';
+import chalk from 'chalk';
+import ts from 'typescript';
 import {config} from './check-mdc-tests-config';
 
 const srcDirectory = join(__dirname, '../src');

scripts/check-package-externals.ts

@@ -8,11 +8,11 @@
  * be passed to this script to ensure that the list is up-to-date.
  */
 
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 import {readFileSync} from 'fs';
-import * as minimatch from 'minimatch';
+import minimatch from 'minimatch';
 import {join, relative} from 'path';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 const projectRoot = join(__dirname, '../');
 const args = process.argv.slice(2);

scripts/ownerslint.ts

@@ -1,4 +1,4 @@
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 import {readdirSync, readFileSync, statSync} from 'fs';
 import {IMinimatch, Minimatch} from 'minimatch';
 import {join} from 'path';

scripts/tsconfig.json

@@ -8,7 +8,8 @@
     "strict": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "esModuleInterop": true
   },
   // The `firebase-functions` folder has its own `package.json` and does
   // not pass type-checking. This excludes it from being checked.

src/cdk/schematics/migration.json

@@ -41,6 +41,11 @@
       "description": "Updates the Angular CDK to v13",
       "factory": "./ng-update/index#updateToV13"
     },
+    "migration-v14": {
+      "version": "14.0.0-0",
+      "description": "Updates the Angular CDK to v14",
+      "factory": "./ng-update/index#updateToV14"
+    },
     "ng-post-update": {
       "description": "Prints out results after ng-update.",
       "factory": "./ng-update/index#postUpdate",

src/cdk/schematics/ng-update/index.ts

@@ -94,6 +94,16 @@ export function updateToV13(): Rule {
   );
 }
 
+/** Entry point for the migration schematics with target of Angular CDK 14.0.0 */
+export function updateToV14(): Rule {
+  return createMigrationSchematicRule(
+    TargetVersion.V14,
+    cdkMigrations,
+    cdkUpgradeData,
+    onMigrationComplete,
+  );
+}
+
 /** Function that will be called when the migration completed. */
 function onMigrationComplete(
   context: SchematicContext,

src/cdk/schematics/update-tool/target-version.ts

@@ -18,6 +18,7 @@ export enum TargetVersion {
   V11 = 'version 11',
   V12 = 'version 12',
   V13 = 'version 13',
+  V14 = 'version 14',
 }
 
 /**

src/material/schematics/migration.json

@@ -41,6 +41,11 @@
       "description": "Updates Angular Material to v13",
       "factory": "./ng-update/index#updateToV13"
     },
+    "migration-v14": {
+      "version": "14.0.0-0",
+      "description": "Updates the Angular Material to v14",
+      "factory": "./ng-update/index#updateToV14"
+    },
     "ng-post-update": {
       "description": "Prints out results after ng-update.",
       "factory": "./ng-update/index#postUpdate",

src/material/schematics/ng-update/index.ts

@@ -116,6 +116,16 @@ export function updateToV13(): Rule {
   );
 }
 
+/** Entry point for the migration schematics with target of Angular Material v14 */
+export function updateToV14(): Rule {
+  return createMigrationSchematicRule(
+    TargetVersion.V14,
+    materialMigrations,
+    materialUpgradeData,
+    onMigrationComplete,
+  );
+}
+
 /** Function that will be called when the migration completed. */
 function onMigrationComplete(
   context: SchematicContext,

tools/dgeni/common/class-inheritance.ts

@@ -4,9 +4,10 @@ import {ApiDoc} from 'dgeni-packages/typescript/api-doc-types/ApiDoc';
 import {ClassExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassExportDoc';
 import {ClassLikeExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassLikeExportDoc';
 import {InterfaceExportDoc} from 'dgeni-packages/typescript/api-doc-types/InterfaceExportDoc';
-import * as ts from 'typescript';
 import {MemberDoc} from 'dgeni-packages/typescript/api-doc-types/MemberDoc';
 
+import ts from 'typescript';
+
 /** Type describing class like documents which have been created through inheritance. */
 export type InheritanceCreatedClassLikeDoc = ClassLikeExportDoc & {
   _inheritanceCreated?: true;

tools/dgeni/processors/async-functions.ts

@@ -2,7 +2,8 @@ import {DocCollection, Processor} from 'dgeni';
 import {ApiDoc} from 'dgeni-packages/typescript/api-doc-types/ApiDoc';
 import {FunctionExportDoc} from 'dgeni-packages/typescript/api-doc-types/FunctionExportDoc';
 import {MethodMemberDoc} from 'dgeni-packages/typescript/api-doc-types/MethodMemberDoc';
-import * as ts from 'typescript';
+
+import ts from 'typescript';
 
 /** Type describing a function-like API doc (i.e. a function, or a class method member). */
 type FunctionLikeDoc = (FunctionExportDoc | MethodMemberDoc) & {

tools/dgeni/processors/categorizer.ts

@@ -1,7 +1,8 @@
+import ts from 'typescript';
+
 import {DocCollection, Processor} from 'dgeni';
 import {ClassLikeExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassLikeExportDoc';
 import {MemberDoc} from 'dgeni-packages/typescript/api-doc-types/MemberDoc';
-import * as ts from 'typescript';
 import {getInheritedDocsOfClass} from '../common/class-inheritance';
 import {
   decorateDeprecatedDoc,

tools/dgeni/processors/merge-inherited-properties.ts

@@ -2,7 +2,7 @@ import {DocCollection, Processor} from 'dgeni';
 import {ClassExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassExportDoc';
 import {ClassLikeExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassLikeExportDoc';
 import {MemberDoc} from 'dgeni-packages/typescript/api-doc-types/MemberDoc';
-import * as ts from 'typescript';
+import ts from 'typescript';
 import {getInheritedDocsOfClass} from '../common/class-inheritance';
 
 /**

tools/dgeni/processors/resolve-inherited-docs.ts

@@ -1,6 +1,6 @@
 import {DocCollection, Document, Processor} from 'dgeni';
 import {ClassLikeExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassLikeExportDoc';
-import * as ts from 'typescript';
+import ts from 'typescript';
 import {getInheritedDocsOfClass, isInheritanceCreatedDoc} from '../common/class-inheritance';
 import {ClassExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassExportDoc';
 import {ApiDoc} from 'dgeni-packages/typescript/api-doc-types/ApiDoc';

tools/example-module/parse-example-file.ts

@@ -1,4 +1,4 @@
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 interface ParsedMetadata {
   isPrimary: boolean;

tools/example-module/parse-example-module-file.ts

@@ -1,6 +1,7 @@
-import * as ts from 'typescript';
 import * as fs from 'fs';
 
+import ts from 'typescript';
+
 /** Parses an example module file by returning all module names within the given file. */
 export function parseExampleModuleFile(filePath: string) {
   const fileContent = fs.readFileSync(filePath, 'utf8');

tools/release-checks/check-framework-peer-dependency.ts

@@ -3,7 +3,7 @@ import {error} from '@angular/dev-infra-private/ng-dev/utils/console';
 import {SemVer} from 'semver';
 import {join} from 'path';
 import {existsSync, readFileSync} from 'fs';
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 
 /** Path to the Bazel file that configures the release output. */
 const bzlConfigPath = join(__dirname, '../../packages.bzl');

tools/release-checks/check-migration-collections.ts

@@ -1,9 +1,9 @@
 import {error} from '@angular/dev-infra-private/ng-dev/utils/console';
 import {dirname, join} from 'path';
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 import {releasePackages} from '../../.ng-dev/release';
 import {readFileSync} from 'fs';
-import * as semver from 'semver';
+import semver from 'semver';
 
 /** Path to the directory containing all package sources. */
 const packagesDir = join(__dirname, '../../src');

tools/release-checks/npm-package-output/check-package.ts

@@ -1,5 +1,5 @@
 import {error} from '@angular/dev-infra-private/ng-dev/utils/console';
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 import {existsSync} from 'fs';
 import {sync as glob} from 'glob';
 import {basename, dirname, join} from 'path';

tools/release-checks/npm-package-output/index.ts

@@ -2,7 +2,7 @@ import {SemVer} from 'semver';
 import {checkReleasePackage} from './check-package';
 import {BuiltPackage} from '@angular/dev-infra-private/ng-dev/release/config';
 import {error} from '@angular/dev-infra-private/ng-dev/utils/console';
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 
 /** Asserts that the given built packages are valid for public consumption. */
 export async function assertValidNpmPackageOutput(

tools/release-checks/npm-package-output/output-validations.ts

@@ -2,7 +2,8 @@ import {existsSync, readFileSync} from 'fs';
 import {sync as glob} from 'glob';
 import {basename, dirname, isAbsolute, join} from 'path';
 import * as semver from 'semver';
-import * as ts from 'typescript';
+
+import ts from 'typescript';
 
 /** RegExp that matches Angular component inline styles that contain a sourcemap reference. */
 const inlineStylesSourcemapRegex = /styles: ?\[["'].*sourceMappingURL=.*["']/;

tools/tslint-rules/lightweightTokensRule.ts

@@ -1,7 +1,8 @@
+import ts from 'typescript';
 import minimatch from 'minimatch';
+
 import * as path from 'path';
 import * as Lint from 'tslint';
-import * as ts from 'typescript';
 
 /** Arguments this rule supports. */
 type RuleArguments = [

tools/tslint-rules/memberNamingRule.ts

@@ -1,4 +1,4 @@
-import * as ts from 'typescript';
+import ts from 'typescript';
 import * as tsutils from 'tsutils';
 import * as Lint from 'tslint';
 

tools/tslint-rules/ngOnChangesPropertyAccessRule.ts

@@ -1,4 +1,4 @@
-import * as ts from 'typescript';
+import ts from 'typescript';
 import * as Lint from 'tslint';
 
 /**

tools/tslint-rules/noCoercionMembersRule.ts

@@ -1,4 +1,4 @@
-import * as ts from 'typescript';
+import ts from 'typescript';
 import * as Lint from 'tslint';
 
 /** Lint rule that disallows coercion class members. */

tools/tslint-rules/noCrossEntryPointRelativeImportsRule.ts

@@ -1,8 +1,9 @@
-import {existsSync} from 'fs';
+import ts from 'typescript';
 import minimatch from 'minimatch';
+
+import {existsSync} from 'fs';
 import {dirname, join, normalize, relative, resolve} from 'path';
 import * as Lint from 'tslint';
-import * as ts from 'typescript';
 
 const BUILD_BAZEL_FILE = 'BUILD.bazel';
 

tools/tslint-rules/requireLicenseBannerRule.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
-import * as ts from 'typescript';
 import * as Lint from 'tslint';
 import minimatch from 'minimatch';
+import ts from 'typescript';
 
 /** License banner that is placed at the top of every public TypeScript file. */
 const licenseBanner = `/**

tools/tslint-rules/validateDecoratorsRule.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
-import * as ts from 'typescript';
 import * as Lint from 'tslint';
+import ts from 'typescript';
 import minimatch from 'minimatch';
 
 /**