build: replace custom lint rule with compiler option (#27833)

crisbeto · web-flow · commit f3602573ad8c · 2023-09-24T19:23:18.000+02:00
We currently have a lint rule that prevents dotted access in `SimpleChanges` objects, because it will break with property minification. These changes replace the rule with the built-in `noPropertyAccessFromIndexSignature` compiler option which has the same effect with the added benefit of aligning us closer with g3 and reducing the amount of code we need to maintain.
diff --git a/integration/mdc-migration/verify-golden.ts b/integration/mdc-migration/verify-golden.ts
@@ -17,7 +17,7 @@ const TEST_DIRECTORY = CURRENT_WORKING_DIRECTORY;
 const GOLDEN_DIRECTORY = path.join(CURRENT_WORKING_DIRECTORY, process.argv[3]);
 const IGNORED_FILES = new Set(process.argv.slice(5));
 
-if (SHOULD_APPROVE && !process.env.BUILD_WORKSPACE_DIRECTORY) {
+if (SHOULD_APPROVE && !process.env['BUILD_WORKSPACE_DIRECTORY']) {
   console.error('Approval command must be run with `bazel run`.');
   process.exit(1);
 }
@@ -197,7 +197,7 @@ async function deleteFiles(file: string, ignoredFiles: Set<string>) {
     if (diffs.length) {
       if (SHOULD_APPROVE) {
         const APPROVED_GOLDEN_DIRECTORY = path.join(
-          process.env.BUILD_WORKSPACE_DIRECTORY!,
+          process.env['BUILD_WORKSPACE_DIRECTORY']!,
           process.argv[4],
         );
         await deleteFiles(
diff --git a/integration/size-test/check-size.ts b/integration/size-test/check-size.ts
@@ -77,7 +77,7 @@ if (deviatedByPercentage) {
 /** Prints the command for approving the current test. */
 function printApproveCommand() {
   console.info(chalk.yellow('You can approve the golden by running the following command:'));
-  console.info(chalk.yellow(`  bazel run ${process.env.BAZEL_TARGET}.approve`));
+  console.info(chalk.yellow(`  bazel run ${process.env['BAZEL_TARGET']}.approve`));
 }
 
 /** Gets the lexicographically sorted size-test golden. */
diff --git a/scripts/build-docs-content.mts b/scripts/build-docs-content.mts
@@ -21,7 +21,7 @@ const distDir = join(projectDir, 'dist/');
 const outputDir = join(distDir, 'docs-content-pkg');
 
 /** Command that runs Bazel. */
-const bazelCmd = process.env.BAZEL || `yarn -s bazel`;
+const bazelCmd = process.env['BAZEL'] || `yarn -s bazel`;
 
 /**
  * Builds the docs content NPM package in snapshot mode.
diff --git a/scripts/build-packages-dist.mts b/scripts/build-packages-dist.mts
@@ -20,7 +20,7 @@ const releaseTargetTag = 'release-package';
 const projectDir = join(dirname(fileURLToPath(import.meta.url)), '../');
 
 /** Command that runs Bazel. */
-const bazelCmd = process.env.BAZEL || `yarn -s bazel`;
+const bazelCmd = process.env['BAZEL'] || `yarn -s bazel`;
 
 /** Command that queries Bazel for all release package targets. */
 const queryPackagesCmd =
diff --git a/scripts/caretaking/resync-caretaker-app-prs.ts b/scripts/caretaking/resync-caretaker-app-prs.ts
@@ -2,7 +2,7 @@ import {Octokit} from '@octokit/rest';
 import * as fetch from 'node-fetch';
 
 const apiBaseUrl = 'https://test-jperrott.firebaseio.com/pulls';
-const github = new Octokit({auth: process.env.TOKEN});
+const github = new Octokit({auth: process.env['TOKEN']});
 
 async function resync() {
   const pulls: any[] = [];
diff --git a/scripts/circleci/notify-slack-job-failure.mts b/scripts/circleci/notify-slack-job-failure.mts
@@ -8,15 +8,15 @@
 import sh from 'shelljs';
 import {isVersionBranch, getConfig, assertValidGithubConfig} from '@angular/ng-dev';
 
-if (process.env.CIRCLE_PR_NUMBER !== undefined) {
+if (process.env['CIRCLE_PR_NUMBER'] !== undefined) {
   console.info('Skipping notifications for pull requests.');
   process.exit(0);
 }
 
-const jobName = process.env.CIRCLE_JOB!;
-const branchName = process.env.CIRCLE_BRANCH!;
-const jobUrl = process.env.CIRCLE_BUILD_URL!;
-const webhookUrl = process.env.SLACK_COMPONENTS_CI_FAILURES_WEBHOOK_URL!;
+const jobName = process.env['CIRCLE_JOB']!;
+const branchName = process.env['CIRCLE_BRANCH']!;
+const jobUrl = process.env['CIRCLE_BUILD_URL']!;
+const webhookUrl = process.env['SLACK_COMPONENTS_CI_FAILURES_WEBHOOK_URL']!;
 
 const {github} = await getConfig([assertValidGithubConfig]);
 const isPublishBranch = isVersionBranch(branchName) || branchName === github.mainBranchName;
diff --git a/scripts/docs-deploy/deploy-ci-push.mts b/scripts/docs-deploy/deploy-ci-push.mts
@@ -13,19 +13,19 @@ import {getReleaseRepoWithApi} from './github-versioning.mjs';
 import {updateVersionsFile} from './update-versions-file.mjs';
 
 async function main() {
-  if (process.env.CIRCLE_PR_NUMBER !== undefined) {
+  if (process.env['CIRCLE_PR_NUMBER'] !== undefined) {
     console.log('Skipping deployment for pull request build.');
     return;
   }
 
-  const branchName = process.env.CIRCLE_BRANCH;
+  const branchName = process.env['CIRCLE_BRANCH'];
   if (branchName === undefined) {
     throw new Error('Deployment script is unable to determine CI branch.');
   }
 
   const repo = await getReleaseRepoWithApi();
   const active = await ActiveReleaseTrains.fetch(repo);
-  const description = `${branchName} - ${process.env.CIRCLE_SHA1!}`;
+  const description = `${branchName} - ${process.env['CIRCLE_SHA1']!}`;
   const {projectId, serviceKey} = firebaseConfig;
 
   if (branchName === active.next.branchName) {
diff --git a/scripts/docs-deploy/deploy-to-site.mts b/scripts/docs-deploy/deploy-to-site.mts
@@ -45,7 +45,7 @@ export async function deployToSite(
   // Setup GCP service key for the docs-app deployment.
   // https://firebase.google.com/docs/admin/setup.
   await fs.promises.writeFile(gcpServiceKeyTmpFile, firebaseServiceKey);
-  process.env.GOOGLE_APPLICATION_CREDENTIALS = gcpServiceKeyTmpFile;
+  process.env['GOOGLE_APPLICATION_CREDENTIALS'] = gcpServiceKeyTmpFile;
 
   await firebase('use', info.projectId);
   await firebase('target:clear', 'hosting', 'mat-aio');
diff --git a/scripts/docs-deploy/utils.mts b/scripts/docs-deploy/utils.mts
@@ -11,7 +11,10 @@ export const projectDir = path.join(path.dirname(fileURLToPath(import.meta.url))
 
 /** Interface describing a site target for the docs-app. */
 export class SiteTarget {
-  constructor(public firebaseSiteId: string, public remoteUrl: string) {}
+  constructor(
+    public firebaseSiteId: string,
+    public remoteUrl: string,
+  ) {}
 }
 
 /** Object capturing all site targets for the docs-app. */
@@ -25,12 +28,12 @@ export const sites = {
 };
 
 /** Optional Github access token. Can be used for querying the active release trains. */
-export const githubAccessToken: string | undefined = process.env.DOCS_DEPLOY_GITHUB_TOKEN;
+export const githubAccessToken: string | undefined = process.env['DOCS_DEPLOY_GITHUB_TOKEN'];
 
 /** Configuration describing the Firebase project that we deploy to. */
 export const firebaseConfig = {
   projectId: 'material-angular-io',
-  serviceKey: process.env.DOCS_SITE_GCP_SERVICE_KEY!,
+  serviceKey: process.env['DOCS_SITE_GCP_SERVICE_KEY']!,
 };
 
 /** Finds and parsed the `package.json` of the specified project directory. */
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
@@ -7,6 +7,7 @@
     "types": ["node"],
     "strict": true,
     "noEmit": true,
+    "noPropertyAccessFromIndexSignature": true,
     "skipLibCheck": true,
     "downlevelIteration": true,
     "esModuleInterop": true
diff --git a/src/bazel-tsconfig-build.json b/src/bazel-tsconfig-build.json
@@ -10,6 +10,7 @@
     "noUnusedParameters": false,
     "noUnusedLocals": false,
     "strictNullChecks": true,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "strictFunctionTypes": true,
     "noImplicitOverride": true,
diff --git a/src/cdk/schematics/tsconfig.json b/src/cdk/schematics/tsconfig.json
@@ -7,6 +7,7 @@
     "outDir": "../../../dist/packages/cdk/schematics",
     "noEmitOnError": false,
     "strictNullChecks": true,
+    "noPropertyAccessFromIndexSignature": true,
     "useUnknownInCatchVariables": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
diff --git a/src/cdk/schematics/utils/build-component.ts b/src/cdk/schematics/utils/build-component.ts
@@ -43,7 +43,8 @@ import {getDefaultComponentOptions, isStandaloneSchematic} from './schematic-opt
 function buildDefaultPath(project: workspaces.ProjectDefinition): string {
   const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
 
-  const projectDirName = project.extensions.projectType === ProjectType.Application ? 'app' : 'lib';
+  const projectDirName =
+    project.extensions['projectType'] === ProjectType.Application ? 'app' : 'lib';
 
   return `${root}${projectDirName}`;
 }
diff --git a/src/cdk/schematics/utils/html-manipulation.ts b/src/cdk/schematics/utils/html-manipulation.ts
@@ -72,7 +72,7 @@ export function addBodyClass(host: Tree, htmlFilePath: string, className: string
     if (!hasClass) {
       // We have source code location info enabled, and we pre-checked that the element
       // has attributes, specifically the `class` attribute.
-      const classAttributeLocation = body.sourceCodeLocation!.attrs!.class;
+      const classAttributeLocation = body.sourceCodeLocation!.attrs!['class'];
       const recordedChange = host
         .beginUpdate(htmlFilePath)
         .insertRight(classAttributeLocation.endOffset - 1, ` ${className}`);
diff --git a/src/cdk/schematics/utils/project-index-file.ts b/src/cdk/schematics/utils/project-index-file.ts
@@ -12,8 +12,8 @@ import {defaultTargetBuilders, getTargetsByBuilderName} from './project-targets'
 /** Gets the path of the index file in the given project. */
 export function getProjectIndexFiles(project: workspaces.ProjectDefinition): Path[] {
   const paths = getTargetsByBuilderName(project, defaultTargetBuilders.build)
-    .filter(t => t.options?.index)
-    .map(t => t.options!.index as Path);
+    .filter(t => t.options?.['index'])
+    .map(t => t.options!['index'] as Path);
 
   // Use a set to remove duplicate index files referenced in multiple build targets of a project.
   return Array.from(new Set(paths));
diff --git a/src/cdk/schematics/utils/project-main-file.ts b/src/cdk/schematics/utils/project-main-file.ts
@@ -13,7 +13,7 @@ import {getProjectTargetOptions} from './project-targets';
 /** Looks for the main TypeScript file in the given project and returns its path. */
 export function getProjectMainFile(project: workspaces.ProjectDefinition): Path {
   const buildOptions = getProjectTargetOptions(project, 'build');
-  const mainPath = buildOptions.browser as Path | undefined;
+  const mainPath = buildOptions['browser'] as Path | undefined;
 
   if (!mainPath) {
     throw new SchematicsException(
diff --git a/src/cdk/schematics/utils/project-style-file.ts b/src/cdk/schematics/utils/project-style-file.ts
@@ -24,10 +24,10 @@ export function getProjectStyleFile(
   extension?: string,
 ): string | null {
   const buildOptions = getProjectTargetOptions(project, 'build');
-  if (buildOptions.styles && isJsonArray(buildOptions.styles) && buildOptions.styles.length) {
-    const styles = buildOptions.styles.map(s =>
-      typeof s === 'string' ? s : (s as {input: string}).input,
-    );
+  const buildStyles = buildOptions['styles'];
+
+  if (buildStyles && isJsonArray(buildStyles) && buildStyles.length) {
+    const styles = buildStyles.map(s => (typeof s === 'string' ? s : (s as {input: string}).input));
 
     // Look for the default style file that is generated for new projects by the Angular CLI. This
     // default style file is usually called `styles.ext` unless it has been changed explicitly.
diff --git a/src/cdk/schematics/utils/project-tsconfig-paths.ts b/src/cdk/schematics/utils/project-tsconfig-paths.ts
@@ -19,7 +19,7 @@ export function getTargetTsconfigPath(
   project: workspaces.ProjectDefinition,
   targetName: string,
 ): WorkspacePath | null {
-  const tsconfig = project.targets?.get(targetName)?.options?.tsConfig;
+  const tsconfig = project.targets?.get(targetName)?.options?.['tsConfig'];
   return tsconfig ? normalize(tsconfig as string) : null;
 }
 
diff --git a/src/cdk/schematics/utils/schematic-options.ts b/src/cdk/schematics/utils/schematic-options.ts
@@ -71,8 +71,8 @@ function getDefaultComponentOption<T>(
   optionNames: string[],
   fallbackValue: T,
 ): T {
-  const schematicOptions = isJsonObject(project.extensions.schematics || null)
-    ? (project.extensions.schematics as JsonObject)
+  const schematicOptions = isJsonObject(project.extensions['schematics'] || null)
+    ? (project.extensions['schematics'] as JsonObject)
     : null;
   const defaultSchematic = schematicOptions
     ? (schematicOptions['@schematics/angular:component'] as JsonObject | null)
diff --git a/src/cdk/testing/tests/webdriver.e2e.spec.ts b/src/cdk/testing/tests/webdriver.e2e.spec.ts
@@ -57,7 +57,7 @@ describe('WebDriverHarnessEnvironment', () => {
 
   beforeAll(async () => {
     wd = await new webdriver.Builder()
-      .usingServer(process.env.WEB_TEST_WEBDRIVER_SERVER!)
+      .usingServer(process.env['WEB_TEST_WEBDRIVER_SERVER']!)
       .withCapabilities(webTestMetadata.capabilities)
       .build();
   });
diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts
@@ -263,23 +263,23 @@ describe('MatDateRangeInput', () => {
     // Set it manually here so we can assert `rangeInput.errorState` correctly.
     fixture.componentInstance.range.markAllAsTouched();
     expect(fixture.componentInstance.rangeInput.errorState).toBe(false);
-    expect(start.errors?.matStartDateInvalid).toBeFalsy();
-    expect(end.errors?.matEndDateInvalid).toBeFalsy();
+    expect(start.errors?.['matStartDateInvalid']).toBeFalsy();
+    expect(end.errors?.['matEndDateInvalid']).toBeFalsy();
 
     start.setValue(new Date(2020, 2, 2));
     end.setValue(new Date(2020, 1, 2));
     fixture.detectChanges();
 
     expect(fixture.componentInstance.rangeInput.errorState).toBe(true);
-    expect(start.errors?.matStartDateInvalid).toBeTruthy();
-    expect(end.errors?.matEndDateInvalid).toBeTruthy();
+    expect(start.errors?.['matStartDateInvalid']).toBeTruthy();
+    expect(end.errors?.['matEndDateInvalid']).toBeTruthy();
 
     end.setValue(new Date(2020, 3, 2));
     fixture.detectChanges();
 
     expect(fixture.componentInstance.rangeInput.errorState).toBe(false);
-    expect(start.errors?.matStartDateInvalid).toBeFalsy();
-    expect(end.errors?.matEndDateInvalid).toBeFalsy();
+    expect(start.errors?.['matStartDateInvalid']).toBeFalsy();
+    expect(end.errors?.['matEndDateInvalid']).toBeFalsy();
   }));
 
   it('should pass the minimum date from the range input to the inner inputs', () => {
@@ -288,16 +288,16 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     const {start, end} = fixture.componentInstance.range.controls;
 
-    expect(start.errors?.matDatepickerMin).toBeFalsy();
-    expect(end.errors?.matDatepickerMin).toBeFalsy();
+    expect(start.errors?.['matDatepickerMin']).toBeFalsy();
+    expect(end.errors?.['matDatepickerMin']).toBeFalsy();
 
     const date = new Date(2020, 2, 2);
     start.setValue(date);
     end.setValue(date);
     fixture.detectChanges();
 
-    expect(start.errors?.matDatepickerMin).toBeTruthy();
-    expect(end.errors?.matDatepickerMin).toBeTruthy();
+    expect(start.errors?.['matDatepickerMin']).toBeTruthy();
+    expect(end.errors?.['matDatepickerMin']).toBeTruthy();
   });
 
   it('should pass the maximum date from the range input to the inner inputs', () => {
@@ -306,16 +306,16 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     const {start, end} = fixture.componentInstance.range.controls;
 
-    expect(start.errors?.matDatepickerMax).toBeFalsy();
-    expect(end.errors?.matDatepickerMax).toBeFalsy();
+    expect(start.errors?.['matDatepickerMax']).toBeFalsy();
+    expect(end.errors?.['matDatepickerMax']).toBeFalsy();
 
     const date = new Date(2020, 2, 2);
     start.setValue(date);
     end.setValue(date);
     fixture.detectChanges();
 
-    expect(start.errors?.matDatepickerMax).toBeTruthy();
-    expect(end.errors?.matDatepickerMax).toBeTruthy();
+    expect(start.errors?.['matDatepickerMax']).toBeTruthy();
+    expect(end.errors?.['matDatepickerMax']).toBeTruthy();
   });
 
   it('should pass the date filter function from the range input to the inner inputs', () => {
@@ -324,16 +324,16 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     const {start, end} = fixture.componentInstance.range.controls;
 
-    expect(start.errors?.matDatepickerFilter).toBeFalsy();
-    expect(end.errors?.matDatepickerFilter).toBeFalsy();
+    expect(start.errors?.['matDatepickerFilter']).toBeFalsy();
+    expect(end.errors?.['matDatepickerFilter']).toBeFalsy();
 
     const date = new Date(2020, 2, 2);
     start.setValue(date);
     end.setValue(date);
     fixture.detectChanges();
 
-    expect(start.errors?.matDatepickerFilter).toBeTruthy();
-    expect(end.errors?.matDatepickerFilter).toBeTruthy();
+    expect(start.errors?.['matDatepickerFilter']).toBeTruthy();
+    expect(end.errors?.['matDatepickerFilter']).toBeTruthy();
   });
 
   it('should should revalidate when a new date filter function is assigned', () => {
@@ -448,14 +448,14 @@ describe('MatDateRangeInput', () => {
     end.setValue(date);
     fixture.detectChanges();
 
-    expect(start.errors?.matDatepickerMin).toBeTruthy();
-    expect(end.errors?.matDatepickerMin).toBeTruthy();
+    expect(start.errors?.['matDatepickerMin']).toBeTruthy();
+    expect(end.errors?.['matDatepickerMin']).toBeTruthy();
 
     fixture.componentInstance.minDate = new Date(2019, 3, 2);
     fixture.detectChanges();
 
-    expect(start.errors?.matDatepickerMin).toBeFalsy();
-    expect(end.errors?.matDatepickerMin).toBeFalsy();
+    expect(start.errors?.['matDatepickerMin']).toBeFalsy();
+    expect(end.errors?.['matDatepickerMin']).toBeFalsy();
   });
 
   it('should set the formatted date value as the input value', () => {
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
@@ -41,7 +41,7 @@ describe('ng-add schematic', () => {
 
   /** Expects the given file to be in the styles of the specified workspace project. */
   function expectProjectStyleFile(project: workspaces.ProjectDefinition, filePath: string) {
-    expect(getProjectTargetOptions(project, 'build').styles)
+    expect(getProjectTargetOptions(project, 'build')['styles'])
       .withContext(`Expected "${filePath}" to be added to the project styles in the workspace.`)
       .toContain(filePath);
   }
@@ -436,7 +436,7 @@ describe('ng-add schematic', () => {
       const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
-      const styles = getProjectTargetOptions(project, 'build').styles;
+      const styles = getProjectTargetOptions(project, 'build')['styles'];
 
       expect(styles)
         .not.withContext('Expected the existing prebuilt theme file to be removed.')
@@ -452,7 +452,7 @@ describe('ng-add schematic', () => {
       const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
-      const styles = getProjectTargetOptions(project, 'build').styles;
+      const styles = getProjectTargetOptions(project, 'build')['styles'];
 
       expect(styles)
         .not.withContext('Expected the default prebuilt theme to be not configured.')
@@ -467,7 +467,7 @@ describe('ng-add schematic', () => {
       const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
-      const styles = getProjectTargetOptions(project, 'build').styles;
+      const styles = getProjectTargetOptions(project, 'build')['styles'];
 
       expect(styles)
         .withContext(
diff --git a/src/material/schematics/ng-add/setup-project.ts b/src/material/schematics/ng-add/setup-project.ts
@@ -38,7 +38,7 @@ export default function (options: Schema): Rule {
     const workspace = await getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
 
-    if (project.extensions.projectType === ProjectType.Application) {
+    if (project.extensions['projectType'] === ProjectType.Application) {
       return chain([
         addAnimationsModule(options),
         addThemeToAppStyles(options),
diff --git a/src/material/schematics/ng-add/theming/theming.ts b/src/material/schematics/ng-add/theming/theming.ts
diff --git a/src/material/schematics/tsconfig.json b/src/material/schematics/tsconfig.json
diff --git a/src/universal-app/prerender.ts b/src/universal-app/prerender.ts
diff --git a/tools/dgeni/tsconfig.json b/tools/dgeni/tsconfig.json
diff --git a/tools/tslint-rules/ngOnChangesPropertyAccessRule.ts b/tools/tslint-rules/ngOnChangesPropertyAccessRule.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tslint.json b/tslint.json

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ if (deviatedByPercentage) {`
`77`	`77`	`/** Prints the command for approving the current test. */`
`78`	`78`	`function printApproveCommand() {`
`79`	`79`	`console.info(chalk.yellow('You can approve the golden by running the following command:'));`
`80`		- console.info(chalk.yellow(` bazel run ${process.env.BAZEL_TARGET}.approve`));
	`80`	+ console.info(chalk.yellow(` bazel run ${process.env['BAZEL_TARGET']}.approve`));
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`/** Gets the lexicographically sorted size-test golden. */`