@dugararchit/cdk 0.0.0-dugararchit

package/schematics/schematics/ng-update/migrations/input-names.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {WorkspacePath} from '../../update-tool/file-system';
+import {findInputsOnElementWithAttr, findInputsOnElementWithTag} from '../html-parsing/angular';
+import {ResolvedResource} from '../../update-tool/component-resource-collector';
+import {Migration} from '../../update-tool/migration';
+
+import {InputNameUpgradeData} from '../data';
+import {findAllSubstringIndices} from '../typescript/literal';
+import {getVersionUpgradeData, UpgradeData} from '../upgrade-data';
+
+/**
+ * Migration that walks through every template or stylesheet and replaces outdated input
+ * names to the new input name. Selectors in stylesheets could also target input
+ * bindings declared as static attribute. See for example:
+ *
+ * e.g. `<my-component color="primary">` becomes `my-component[color]`
+ */
+export class InputNamesMigration extends Migration<UpgradeData> {
+  /** Change data that upgrades to the specified target version. */
+  data: InputNameUpgradeData[] = getVersionUpgradeData(this, 'inputNames');
+
+  // Only enable the migration rule if there is upgrade data.
+  enabled = this.data.length !== 0;
+
+  override visitStylesheet(stylesheet: ResolvedResource): void {
+    this.data.forEach(name => {
+      const currentSelector = `[${name.replace}]`;
+      const updatedSelector = `[${name.replaceWith}]`;
+
+      findAllSubstringIndices(stylesheet.content, currentSelector)
+        .map(offset => stylesheet.start + offset)
+        .forEach(start =>
+          this._replaceInputName(
+            stylesheet.filePath,
+            start,
+            currentSelector.length,
+            updatedSelector,
+          ),
+        );
+    });
+  }
+
+  override visitTemplate(template: ResolvedResource): void {
+    this.data.forEach(name => {
+      const limitedTo = name.limitedTo;
+      const relativeOffsets: number[] = [];
+
+      if (limitedTo.attributes) {
+        relativeOffsets.push(
+          ...findInputsOnElementWithAttr(template.content, name.replace, limitedTo.attributes),
+        );
+      }
+
+      if (limitedTo.elements) {
+        relativeOffsets.push(
+          ...findInputsOnElementWithTag(template.content, name.replace, limitedTo.elements),
+        );
+      }
+
+      relativeOffsets
+        .map(offset => template.start + offset)
+        .forEach(start =>
+          this._replaceInputName(template.filePath, start, name.replace.length, name.replaceWith),
+        );
+    });
+  }
+
+  private _replaceInputName(
+    filePath: WorkspacePath,
+    start: number,
+    width: number,
+    newName: string,
+  ) {
+    this.fileSystem.edit(filePath).remove(start, width).insertRight(start, newName);
+  }
+}

package/schematics/schematics/ng-update/migrations/method-call-arguments.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as ts from 'typescript';
+import {Migration} from '../../update-tool/migration';
+
+import {MethodCallUpgradeData} from '../data';
+import {getVersionUpgradeData, UpgradeData} from '../upgrade-data';
+
+/**
+ * Migration that visits every TypeScript method call expression and checks if the
+ * argument count is invalid and needs to be *manually* updated.
+ */
+export class MethodCallArgumentsMigration extends Migration<UpgradeData> {
+  /** Change data that upgrades to the specified target version. */
+  data: MethodCallUpgradeData[] = getVersionUpgradeData(this, 'methodCallChecks');
+
+  // Only enable the migration rule if there is upgrade data.
+  enabled = this.data.length !== 0;
+
+  override visitNode(node: ts.Node): void {
+    if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression)) {
+      this._checkPropertyAccessMethodCall(node);
+    }
+  }
+
+  private _checkPropertyAccessMethodCall(node: ts.CallExpression) {
+    const propertyAccess = node.expression as ts.PropertyAccessExpression;
+
+    if (!ts.isIdentifier(propertyAccess.name)) {
+      return;
+    }
+
+    const hostType = this.typeChecker.getTypeAtLocation(propertyAccess.expression);
+    const hostTypeName = hostType.symbol && hostType.symbol.name;
+    const methodName = propertyAccess.name.text;
+
+    if (!hostTypeName) {
+      return;
+    }
+
+    // TODO(devversion): Revisit the implementation of this upgrade rule. It seems difficult
+    // and ambiguous to maintain the data for this rule. e.g. consider a method which has the
+    // same amount of arguments but just had a type change. In that case we could still add
+    // new entries to the upgrade data that match the current argument length to just show
+    // a failure message, but adding that data becomes painful if the method has optional
+    // parameters and it would mean that the error message would always show up, even if the
+    // argument is in some cases still assignable to the new parameter type. We could re-use
+    // the logic we have in the constructor-signature checks to check for assignability and
+    // to make the upgrade data less verbose.
+    const failure = this.data
+      .filter(data => data.method === methodName && data.className === hostTypeName)
+      .map(data => data.invalidArgCounts.find(f => f.count === node.arguments.length))[0];
+
+    if (!failure) {
+      return;
+    }
+
+    this.createFailureAtNode(
+      node,
+      `Found call to "${hostTypeName + '.' + methodName}" ` +
+        `with ${failure.count} arguments. Message: ${failure.message}`,
+    );
+  }
+}

package/schematics/schematics/ng-update/migrations/misc-template.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {TargetVersion} from '../../update-tool/target-version';
+import {ResolvedResource} from '../../update-tool/component-resource-collector';
+import {Migration} from '../../update-tool/migration';
+import {findAllSubstringIndices} from '../typescript/literal';
+import {UpgradeData} from '../upgrade-data';
+
+/**
+ * Migration that walks through every template and reports if there are
+ * instances of outdated Angular CDK API that can't be migrated automatically.
+ */
+export class MiscTemplateMigration extends Migration<UpgradeData> {
+  // Only enable this rule if the migration targets version 6. The rule
+  // currently only includes migrations for V6 deprecations.
+  enabled = this.targetVersion === TargetVersion.V6;
+
+  override visitTemplate(template: ResolvedResource): void {
+    // Migration for https://github.com/angular/components/pull/10325 (v6)
+    findAllSubstringIndices(template.content, 'cdk-focus-trap').forEach(offset => {
+      this.failures.push({
+        filePath: template.filePath,
+        position: template.getCharacterAndLineOfPosition(template.start + offset),
+        message:
+          `Found deprecated element selector "cdk-focus-trap" which has been ` +
+          `changed to an attribute selector "[cdkTrapFocus]".`,
+      });
+    });
+  }
+}

package/schematics/schematics/ng-update/migrations/output-names.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {WorkspacePath} from '../../update-tool/file-system';
+import {ResolvedResource} from '../../update-tool/component-resource-collector';
+import {Migration} from '../../update-tool/migration';
+
+import {OutputNameUpgradeData} from '../data';
+import {findOutputsOnElementWithAttr, findOutputsOnElementWithTag} from '../html-parsing/angular';
+import {getVersionUpgradeData, UpgradeData} from '../upgrade-data';
+
+/**
+ * Migration that walks through every inline or external HTML template and switches
+ * changed output binding names to the proper new output name.
+ */
+export class OutputNamesMigration extends Migration<UpgradeData> {
+  /** Change data that upgrades to the specified target version. */
+  data: OutputNameUpgradeData[] = getVersionUpgradeData(this, 'outputNames');
+
+  // Only enable the migration rule if there is upgrade data.
+  enabled = this.data.length !== 0;
+
+  override visitTemplate(template: ResolvedResource): void {
+    this.data.forEach(name => {
+      const limitedTo = name.limitedTo;
+      const relativeOffsets: number[] = [];
+
+      if (limitedTo.attributes) {
+        relativeOffsets.push(
+          ...findOutputsOnElementWithAttr(template.content, name.replace, limitedTo.attributes),
+        );
+      }
+
+      if (limitedTo.elements) {
+        relativeOffsets.push(
+          ...findOutputsOnElementWithTag(template.content, name.replace, limitedTo.elements),
+        );
+      }
+
+      relativeOffsets
+        .map(offset => template.start + offset)
+        .forEach(start =>
+          this._replaceOutputName(template.filePath, start, name.replace.length, name.replaceWith),
+        );
+    });
+  }
+
+  private _replaceOutputName(
+    filePath: WorkspacePath,
+    start: number,
+    width: number,
+    newName: string,
+  ) {
+    this.fileSystem.edit(filePath).remove(start, width).insertRight(start, newName);
+  }
+}

package/schematics/schematics/ng-update/migrations/property-names.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as ts from 'typescript';
+import {Migration} from '../../update-tool/migration';
+
+import {PropertyNameUpgradeData} from '../data';
+import {getVersionUpgradeData, UpgradeData} from '../upgrade-data';
+
+/**
+ * Migration that walks through every property access expression and updates
+ * accessed properties that have been updated to a new name.
+ */
+export class PropertyNamesMigration extends Migration<UpgradeData> {
+  /** Change data that upgrades to the specified target version. */
+  data: PropertyNameUpgradeData[] = getVersionUpgradeData(this, 'propertyNames');
+
+  // Only enable the migration rule if there is upgrade data.
+  enabled = this.data.length !== 0;
+
+  override visitNode(node: ts.Node): void {
+    if (ts.isPropertyAccessExpression(node)) {
+      this._visitPropertyAccessExpression(node);
+    }
+  }
+
+  private _visitPropertyAccessExpression(node: ts.PropertyAccessExpression) {
+    const hostType = this.typeChecker.getTypeAtLocation(node.expression);
+    const typeNames: string[] = [];
+
+    if (hostType) {
+      if (hostType.isIntersection()) {
+        hostType.types.forEach(type => {
+          if (type.symbol) {
+            typeNames.push(type.symbol.getName());
+          }
+        });
+      } else if (hostType.symbol) {
+        typeNames.push(hostType.symbol.getName());
+      }
+    }
+
+    this.data.forEach(data => {
+      if (node.name.text !== data.replace) {
+        return;
+      }
+
+      if (!data.limitedTo || typeNames.some(type => data.limitedTo.classes.includes(type))) {
+        this.fileSystem
+          .edit(this.fileSystem.resolve(node.getSourceFile().fileName))
+          .remove(node.name.getStart(), node.name.getWidth())
+          .insertRight(node.name.getStart(), data.replaceWith);
+      }
+    });
+  }
+}

package/schematics/schematics/ng-update/migrations/symbol-removal.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as ts from 'typescript';
+import {Migration} from '../../update-tool/migration';
+import {SymbolRemovalUpgradeData} from '../data';
+import {getVersionUpgradeData, UpgradeData} from '../upgrade-data';
+
+/** Migration that flags imports for symbols that have been removed. */
+export class SymbolRemovalMigration extends Migration<UpgradeData> {
+  /** Change data that upgrades to the specified target version. */
+  data: SymbolRemovalUpgradeData[] = getVersionUpgradeData(this, 'symbolRemoval');
+
+  // Only enable the migration rule if there is upgrade data.
+  enabled = this.data.length !== 0;
+
+  override visitNode(node: ts.Node): void {
+    if (!ts.isImportDeclaration(node) || !ts.isStringLiteral(node.moduleSpecifier)) {
+      return;
+    }
+
+    const namedBindings = node.importClause && node.importClause.namedBindings;
+
+    if (!namedBindings || !ts.isNamedImports(namedBindings)) {
+      return;
+    }
+
+    const moduleNameMatches = this.data.filter(
+      entry => (node.moduleSpecifier as ts.StringLiteral).text === entry.module,
+    );
+
+    if (!moduleNameMatches.length) {
+      return;
+    }
+
+    namedBindings.elements.forEach(element => {
+      const elementName = element.propertyName?.text || element.name.text;
+
+      moduleNameMatches.forEach(match => {
+        if (match.name === elementName) {
+          this.createFailureAtNode(element, match.message);
+        }
+      });
+    });
+  }
+}

package/schematics/schematics/ng-update/migrations/tilde-import-v13/tilde-import-migration.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {extname} from '@angular-devkit/core';
+import {ResolvedResource} from '../../../update-tool/component-resource-collector';
+import {TargetVersion} from '../../../update-tool/target-version';
+import {DevkitMigration} from '../../devkit-migration';
+
+/** Migration that removes tilde symbols from imports. */
+export class TildeImportMigration extends DevkitMigration<null> {
+  enabled = this.targetVersion === TargetVersion.V13;
+
+  override visitStylesheet(stylesheet: ResolvedResource): void {
+    const extension = extname(stylesheet.filePath);
+
+    if (extension === '.scss' || extension === '.css') {
+      const content = stylesheet.content;
+      const migratedContent = content.replace(
+        /@(?:import|use) +['"](~@angular\/.*)['"].*;?/g,
+        (match, importPath) => {
+          const index = match.indexOf(importPath);
+          const newImportPath = importPath.replace(/^~|\.scss$/g, '');
+          return match.slice(0, index) + newImportPath + match.slice(index + importPath.length);
+        },
+      );
+
+      if (migratedContent && migratedContent !== content) {
+        this.fileSystem
+          .edit(stylesheet.filePath)
+          .remove(0, stylesheet.content.length)
+          .insertLeft(0, migratedContent);
+      }
+    }
+  }
+}

package/schematics/schematics/ng-update/public-api.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './data/index';
+export * from './devkit-migration';
+export * from './devkit-migration-rule';
+export * from './html-parsing/angular';
+export * from './html-parsing/elements';
+export * from './typescript/base-types';
+export * from './typescript/imports';
+export * from './typescript/literal';
+export * from './typescript/module-specifiers';
+export * from './upgrade-data';

package/schematics/schematics/ng-update/test-cases/index.spec.ts

@@ -0,0 +1,18 @@
+import {defineJasmineTestCases, findBazelVersionTestCases} from '@dugararchit/cdk/schematics/testing';
+import {MIGRATION_PATH} from '../../paths';
+import {getAllVersionNames} from '../../update-tool/target-version';
+
+describe('CDK upgrade test cases', () => {
+  const versionNames = getAllVersionNames().map(versionName => versionName.toLowerCase());
+  const testCasesMap = findBazelVersionTestCases(
+    'angular_material/src/cdk/schematics/ng-update/test-cases',
+  );
+
+  // Setup the test cases for each target version. The test cases will be automatically
+  // detected through Bazel's runfiles manifest.
+  versionNames.forEach(version =>
+    describe(`${version} update`, () => {
+      defineJasmineTestCases(version, MIGRATION_PATH, testCasesMap.get(version));
+    }),
+  );
+});

package/schematics/schematics/ng-update/test-cases/misc/external-resource-resolution.spec.ts

@@ -0,0 +1,32 @@
+import {resolveBazelPath} from '@dugararchit/cdk/schematics/testing';
+import {MIGRATION_PATH} from '../../../paths';
+import {createTestCaseSetup} from '../../../testing';
+
+describe('ng-update external resource resolution', () => {
+  it('should properly resolve referenced resources in components', async () => {
+    const {runFixers, writeFile, appTree} = await createTestCaseSetup(
+      'migration-v6',
+      MIGRATION_PATH,
+      [resolveBazelPath(__dirname, './external-resource-resolution_input.ts')],
+    );
+
+    const testContent = `<div cdk-connected-overlay [origin]="test"></div>`;
+    const expected = `<div cdk-connected-overlay [cdkConnectedOverlayOrigin]="test"></div>`;
+
+    writeFile('/projects/material/test.html', testContent);
+    writeFile('/projects/cdk-testing/src/some-tmpl.html', testContent);
+    writeFile('/projects/cdk-testing/src/test-cases/local.html', testContent);
+
+    await runFixers();
+
+    expect(appTree.readContent('/projects/material/test.html'))
+      .withContext('Expected absolute devkit tree paths to work.')
+      .toBe(expected);
+    expect(appTree.readContent('/projects/cdk-testing/src/some-tmpl.html'))
+      .withContext('Expected relative paths with parent segments to work.')
+      .toBe(expected);
+    expect(appTree.readContent('/projects/cdk-testing/src/test-cases/local.html'))
+      .withContext('Expected relative paths without explicit dot to work.')
+      .toBe(expected);
+  });
+});

package/schematics/schematics/ng-update/test-cases/misc/external-resource-resolution_input.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'test-cmp',
+  templateUrl: '/projects/material/test.html',
+})
+export class MyTestComp {}
+
+@Component({
+  standalone: false,
+  selector: 'test-cmp2',
+  templateUrl: '../some-tmpl.html',
+})
+export class MyTestComp2 {}
+
+@Component({
+  standalone: false,
+  selector: 'test-cmp3',
+  templateUrl: 'local.html',
+})
+export class MyTestComp3 {}

package/schematics/schematics/ng-update/test-cases/misc/global-stylesheets-test.scss

@@ -0,0 +1,3 @@
+[cdkPortalHost] {
+  color: red;
+}

package/schematics/schematics/ng-update/test-cases/misc/global-stylesheets.spec.ts

@@ -0,0 +1,50 @@
+import {resolveBazelPath} from '@dugararchit/cdk/schematics/testing';
+import {readFileSync} from 'fs';
+import {MIGRATION_PATH} from '../../../paths';
+import {createTestCaseSetup} from '../../../testing';
+
+describe('global stylesheets migration', () => {
+  it('should not check stylesheet twice if referenced in component', async () => {
+    const {runFixers, writeFile, appTree} = await createTestCaseSetup(
+      'migration-v6',
+      MIGRATION_PATH,
+      [resolveBazelPath(__dirname, './global-stylesheets_input.ts')],
+    );
+
+    const testStylesheetPath = 'projects/cdk-testing/src/test-cases/global-stylesheets-test.scss';
+
+    // Copy the test stylesheets file into the test CLI application. That way it will
+    // be picked up by the update-tool.
+    writeFile(
+      testStylesheetPath,
+      readFileSync(resolveBazelPath(__dirname, './global-stylesheets-test.scss'), 'utf8'),
+    );
+    writeFile('/projects/cdk-testing/third_party/materialize.css/bundle.css', '');
+
+    await runFixers();
+
+    // if the external stylesheet would have been checked multiple times, the migrated
+    // stylesheet would not match the expected output and the devkit would throw that
+    // the same replacements were recorded for the same source file.
+    expect(appTree.readContent(testStylesheetPath)).toBe(`[cdkPortalOutlet] {\n  color: red;\n}\n`);
+  });
+
+  it('should not check stylesheets outside of project target', async () => {
+    const {runFixers, writeFile, appTree} = await createTestCaseSetup(
+      'migration-v6',
+      MIGRATION_PATH,
+      [],
+    );
+    const subProjectStylesheet = '[cdkPortalHost] {\n  color: red;\n}\n';
+
+    writeFile('/sub_project/node_modules/materialize.css/package.json', '');
+    writeFile('/sub_project/assets/test.css', subProjectStylesheet);
+
+    // Run the fixers and expect no error to be thrown.
+    await expectAsync(runFixers()).not.toBeRejected();
+
+    // if the external stylesheet that is not of a project target would have been checked
+    // by accident, the stylesheet would differ from the original file content.
+    expect(appTree.readContent('/sub_project/assets/test.css')).toBe(subProjectStylesheet);
+  });
+});

package/schematics/schematics/ng-update/test-cases/misc/global-stylesheets_input.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  standalone: false,
+  template: 'hello',
+  styleUrls: ['./global-stylesheets-test.scss'],
+})
+export class MyTestComp {}

package/schematics/schematics/ng-update/test-cases/misc/method-call-checks.spec.ts

@@ -0,0 +1,20 @@
+import {resolveBazelPath} from '@dugararchit/cdk/schematics/testing';
+import {MIGRATION_PATH} from '../../../paths';
+import {createTestCaseSetup} from '../../../testing';
+
+describe('v6 method call checks', () => {
+  it('should properly report invalid method calls', async () => {
+    const {runFixers} = await createTestCaseSetup('migration-v6', MIGRATION_PATH, [
+      resolveBazelPath(__dirname, './method-call-checks_input.ts'),
+    ]);
+
+    const {logOutput} = await runFixers();
+
+    expect(logOutput).toMatch(
+      /@15:5 - Found call to "FocusMonitor\.monitor".*renderer.*has been removed/,
+    );
+    expect(logOutput).toMatch(
+      /@16:5 - Found call to "FocusMonitor\.monitor".*renderer.*has been removed/,
+    );
+  });
+});

package/schematics/schematics/ng-update/test-cases/misc/method-call-checks_input.ts

@@ -0,0 +1,18 @@
+import {AfterViewInit, ElementRef, Renderer2} from '@angular/core';
+
+class FocusMonitor {
+  monitor(_htmlElement: any, _renderer: Renderer2, _checkChildren: boolean) {}
+}
+
+class A implements AfterViewInit {
+  self = {a: this.focusMonitor};
+
+  constructor(private focusMonitor: FocusMonitor,
+              private elementRef: ElementRef,
+              private renderer: Renderer2) {}
+
+  ngAfterViewInit() {
+    this.focusMonitor.monitor(this.elementRef.nativeElement, this.renderer, true);
+    this.self.a.monitor(this.elementRef.nativeElement, this.renderer, true);
+  }
+}

package/schematics/schematics/ng-update/test-cases/misc/module-resolution.spec.ts

@@ -0,0 +1,27 @@
+import {MIGRATION_PATH} from '../../../paths';
+import {createTestCaseSetup} from '../../../testing';
+
+describe('ng update typescript program module resolution', () => {
+  // Regression test for: https://github.com/angular/components/issues/22919.
+  it(
+    'should not error if module resolution tries a non-existent path where a path segment ' +
+      'matches an existing file',
+    async () => {
+      const {runFixers, writeFile} = await createTestCaseSetup('migration-v6', MIGRATION_PATH, []);
+
+      writeFile('/node_modules/some-other-module/package.json', `{}`);
+      writeFile('/node_modules/some-other-module/styles.css', '');
+
+      // We add an import to a non-existent sub-path of `some-other-module/styles`. The TypeScript
+      // module resolution logic could try various sub-paths. This previously resulted in an error
+      // as the devkit tree `getDir` logic accidentally walked up the path and threw an error if
+      // a path segment is an actual file.
+      writeFile(
+        '/projects/cdk-testing/src/main.ts',
+        `import 'some-other-module/styles.css/non/existent';`,
+      );
+
+      await expectAsync(runFixers()).toBeResolved();
+    },
+  );
+});