@dugararchit/cdk 0.0.0-dugararchit

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

@@ -0,0 +1,151 @@
+/**
+ * @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 {VersionChanges} from '../../update-tool/version-changes';
+
+export interface PropertyNameUpgradeData {
+  /** The property name to replace. */
+  replace: string;
+  /** The new name for the property. */
+  replaceWith: string;
+  /** Controls which classes in which this replacement is made. */
+  limitedTo: {
+    /** Replace the property only when its type is one of the given Classes. */
+    classes: string[];
+  };
+}
+
+export const propertyNames: VersionChanges<PropertyNameUpgradeData> = {
+  [TargetVersion.V9]: [
+    {
+      pr: 'https://github.com/angular/components/pull/17084',
+      changes: [
+        {
+          replace: 'boundaryElementSelector',
+          replaceWith: 'boundaryElement',
+          limitedTo: {classes: ['CdkDrag']},
+        },
+      ],
+    },
+    {
+      pr: 'https://github.com/angular/components/pull/17302',
+      changes: [
+        {
+          replace: 'onChange',
+          replaceWith: 'changed',
+          limitedTo: {classes: ['SelectionModel']},
+        },
+      ],
+    },
+  ],
+  [TargetVersion.V8]: [],
+  [TargetVersion.V7]: [
+    {
+      pr: 'https://github.com/angular/components/pull/8286',
+      changes: [
+        {replace: 'onChange', replaceWith: 'changed', limitedTo: {classes: ['SelectionModel']}},
+      ],
+    },
+
+    {
+      pr: 'https://github.com/angular/components/pull/12927',
+      changes: [
+        {
+          replace: 'flexibleDiemsions',
+          replaceWith: 'flexibleDimensions',
+          limitedTo: {classes: ['CdkConnectedOverlay']},
+        },
+      ],
+    },
+  ],
+
+  [TargetVersion.V6]: [
+    {
+      pr: 'https://github.com/angular/components/pull/10161',
+      changes: [
+        {
+          replace: '_deprecatedOrigin',
+          replaceWith: 'origin',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedPositions',
+          replaceWith: 'positions',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedOffsetX',
+          replaceWith: 'offsetX',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedOffsetY',
+          replaceWith: 'offsetY',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedWidth',
+          replaceWith: 'width',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedHeight',
+          replaceWith: 'height',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedMinWidth',
+          replaceWith: 'minWidth',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedMinHeight',
+          replaceWith: 'minHeight',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedBackdropClass',
+          replaceWith: 'backdropClass',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedScrollStrategy',
+          replaceWith: 'scrollStrategy',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedOpen',
+          replaceWith: 'open',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+        {
+          replace: '_deprecatedHasBackdrop',
+          replaceWith: 'hasBackdrop',
+          limitedTo: {classes: ['CdkConnectedOverlay', 'ConnectedOverlayDirective']},
+        },
+      ],
+    },
+
+    {
+      pr: 'https://github.com/angular/components/pull/10257',
+      changes: [
+        {
+          replace: '_deprecatedPortal',
+          replaceWith: 'portal',
+          limitedTo: {classes: ['CdkPortalOutlet']},
+        },
+        {
+          replace: '_deprecatedPortalHost',
+          replaceWith: 'portal',
+          limitedTo: {classes: ['CdkPortalOutlet']},
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,22 @@
+/**
+ * @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 {VersionChanges} from '../../update-tool/version-changes';
+
+export interface SymbolRemovalUpgradeData {
+  /** Module that the symbol was removed from. */
+  module: string;
+
+  /** Name of the symbol being removed. */
+  name: string;
+
+  /** Message to log explaining why the symbol was removed. */
+  message: string;
+}
+
+export const symbolRemoval: VersionChanges<SymbolRemovalUpgradeData> = {};

package/schematics/schematics/ng-update/devkit-file-system.ts

@@ -0,0 +1,87 @@
+/**
+ * @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 {normalize, Path} from '@angular-devkit/core';
+import {Tree, UpdateRecorder} from '@angular-devkit/schematics';
+import {DirectoryEntry, FileSystem} from '../update-tool/file-system';
+import * as path from 'path';
+
+/**
+ * File system that leverages the virtual tree from the CLI devkit. This file
+ * system is commonly used by `ng update` migrations that run as part of the
+ * Angular CLI.
+ */
+export class DevkitFileSystem extends FileSystem {
+  private _updateRecorderCache = new Map<string, UpdateRecorder>();
+
+  constructor(private _tree: Tree) {
+    super();
+  }
+
+  resolve(...segments: string[]): Path {
+    // Note: We use `posix.resolve` as the devkit paths are using posix separators.
+    return normalize(path.posix.resolve('/', ...segments.map(normalize)));
+  }
+
+  edit(filePath: Path) {
+    if (this._updateRecorderCache.has(filePath)) {
+      return this._updateRecorderCache.get(filePath)!;
+    }
+    const recorder = this._tree.beginUpdate(filePath);
+    this._updateRecorderCache.set(filePath, recorder);
+    return recorder;
+  }
+
+  commitEdits() {
+    this._updateRecorderCache.forEach(r => this._tree.commitUpdate(r));
+    this._updateRecorderCache.clear();
+  }
+
+  fileExists(filePath: Path) {
+    return this._tree.exists(filePath);
+  }
+
+  directoryExists(dirPath: Path) {
+    // The devkit tree does not expose an API for checking whether a given
+    // directory exists. It throws a specific error though if a directory
+    // is being read as a file. We use that to check if a directory exists.
+    try {
+      this._tree.get(dirPath);
+    } catch (e) {
+      // Note: We do not use an `instanceof` check here. It could happen that the devkit version
+      // used by the CLI is different than the one we end up loading. This can happen depending
+      // on how Yarn/NPM hoists the NPM packages / whether there are multiple versions installed.
+      if (e instanceof Error && e.constructor.name === 'PathIsDirectoryException') {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  overwrite(filePath: Path, content: string) {
+    this._tree.overwrite(filePath, content);
+  }
+
+  create(filePath: Path, content: string) {
+    this._tree.create(filePath, content);
+  }
+
+  delete(filePath: Path) {
+    this._tree.delete(filePath);
+  }
+
+  read(filePath: Path) {
+    const buffer = this._tree.read(filePath);
+    return buffer !== null ? buffer.toString() : null;
+  }
+
+  readDirectory(dirPath: Path): DirectoryEntry {
+    const {subdirs: directories, subfiles: files} = this._tree.getDir(dirPath);
+    return {directories, files};
+  }
+}

package/schematics/schematics/ng-update/devkit-migration-rule.ts

@@ -0,0 +1,185 @@
+/**
+ * @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 {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
+import {ProjectDefinition} from '@angular-devkit/core/src/workspace';
+
+import {UpdateProject} from '../update-tool';
+import {WorkspacePath} from '../update-tool/file-system';
+import {MigrationCtor} from '../update-tool/migration';
+import {TargetVersion} from '../update-tool/target-version';
+import {getTargetTsconfigPath, getWorkspaceConfigGracefully} from '../utils/project-tsconfig-paths';
+
+import {DevkitFileSystem} from './devkit-file-system';
+import {DevkitContext, DevkitMigration, DevkitMigrationCtor} from './devkit-migration';
+import {findStylesheetFiles} from './find-stylesheets';
+import {AttributeSelectorsMigration} from './migrations/attribute-selectors';
+import {ClassInheritanceMigration} from './migrations/class-inheritance';
+import {ClassNamesMigration} from './migrations/class-names';
+import {ConstructorSignatureMigration} from './migrations/constructor-signature';
+import {CssSelectorsMigration} from './migrations/css-selectors';
+import {ElementSelectorsMigration} from './migrations/element-selectors';
+import {InputNamesMigration} from './migrations/input-names';
+import {MethodCallArgumentsMigration} from './migrations/method-call-arguments';
+import {MiscTemplateMigration} from './migrations/misc-template';
+import {OutputNamesMigration} from './migrations/output-names';
+import {PropertyNamesMigration} from './migrations/property-names';
+import {UpgradeData} from './upgrade-data';
+import {SymbolRemovalMigration} from './migrations/symbol-removal';
+
+/** List of migrations which run for the CDK update. */
+export const cdkMigrations: MigrationCtor<UpgradeData>[] = [
+  AttributeSelectorsMigration,
+  ClassInheritanceMigration,
+  ClassNamesMigration,
+  ConstructorSignatureMigration,
+  CssSelectorsMigration,
+  ElementSelectorsMigration,
+  InputNamesMigration,
+  MethodCallArgumentsMigration,
+  MiscTemplateMigration,
+  OutputNamesMigration,
+  PropertyNamesMigration,
+  SymbolRemovalMigration,
+];
+
+export type NullableDevkitMigration = MigrationCtor<UpgradeData | null, DevkitContext>;
+
+type PostMigrationFn = (
+  context: SchematicContext,
+  targetVersion: TargetVersion,
+  hasFailure: boolean,
+) => void;
+
+/**
+ * Creates a Angular schematic rule that runs the upgrade for the
+ * specified target version.
+ */
+export function createMigrationSchematicRule(
+  targetVersion: TargetVersion,
+  extraMigrations: NullableDevkitMigration[],
+  upgradeData: UpgradeData,
+  onMigrationCompleteFn?: PostMigrationFn,
+): Rule {
+  return async (tree: Tree, context: SchematicContext) => {
+    const logger = context.logger;
+    const workspace = await getWorkspaceConfigGracefully(tree);
+
+    if (workspace === null) {
+      logger.error('Could not find workspace configuration file.');
+      return;
+    }
+
+    // Keep track of all project source files which have been checked/migrated. This is
+    // necessary because multiple TypeScript projects can contain the same source file and
+    // we don't want to check these again, as this would result in duplicated failure messages.
+    const analyzedFiles = new Set<WorkspacePath>();
+    const fileSystem = new DevkitFileSystem(tree);
+    const projectNames = workspace.projects.keys();
+    const migrations = [...cdkMigrations, ...extraMigrations] as NullableDevkitMigration[];
+    let hasFailures = false;
+
+    for (const projectName of projectNames) {
+      const project = workspace.projects.get(projectName)!;
+      const buildTsconfigPath = getTargetTsconfigPath(project, 'build');
+      const testTsconfigPath = getTargetTsconfigPath(project, 'test');
+
+      if (!buildTsconfigPath && !testTsconfigPath) {
+        logger.warn(
+          `Skipping migration for project ${projectName}. Unable to determine 'tsconfig.json' file in workspace config.`,
+        );
+        continue;
+      }
+
+      // In some applications, developers will have global stylesheets which are not
+      // specified in any Angular component. Therefore we glob up all CSS and SCSS files
+      // in the project and migrate them if needed.
+      // TODO: rework this to collect global stylesheets from the workspace config. COMP-280.
+      const additionalStylesheetPaths = findStylesheetFiles(tree, project.root);
+
+      if (buildTsconfigPath !== null) {
+        runMigrations(project, projectName, buildTsconfigPath, additionalStylesheetPaths, false);
+      }
+      if (testTsconfigPath !== null) {
+        runMigrations(project, projectName, testTsconfigPath, additionalStylesheetPaths, true);
+      }
+    }
+
+    let runPackageManager = false;
+    // Run the global post migration static members for all
+    // registered devkit migrations.
+    migrations.forEach(m => {
+      const actionResult =
+        isDevkitMigration(m) && m.globalPostMigration !== undefined
+          ? m.globalPostMigration(tree, targetVersion, context)
+          : null;
+      if (actionResult) {
+        runPackageManager = runPackageManager || actionResult.runPackageManager;
+      }
+    });
+
+    // If a migration requested the package manager to run, we run it as an
+    // asynchronous post migration task. We cannot run it synchronously,
+    // as file changes from the current migration task are not applied to
+    // the file system yet.
+    if (runPackageManager) {
+      context.addTask(new NodePackageInstallTask({quiet: false}));
+    }
+
+    if (onMigrationCompleteFn) {
+      onMigrationCompleteFn(context, targetVersion, hasFailures);
+    }
+
+    /** Runs the migrations for the specified workspace project. */
+    function runMigrations(
+      project: ProjectDefinition,
+      projectName: string,
+      tsconfigPath: WorkspacePath,
+      additionalStylesheetPaths: string[],
+      isTestTarget: boolean,
+    ) {
+      const program = UpdateProject.createProgramFromTsconfig(tsconfigPath, fileSystem);
+      const updateContext: DevkitContext = {
+        isTestTarget,
+        projectName,
+        project,
+        tree,
+      };
+
+      const updateProject = new UpdateProject(
+        updateContext,
+        program,
+        fileSystem,
+        analyzedFiles,
+        context.logger,
+      );
+
+      const result = updateProject.migrate(
+        migrations,
+        targetVersion,
+        upgradeData,
+        additionalStylesheetPaths,
+      );
+
+      // Commit all recorded edits in the update recorder. We apply the edits after all
+      // migrations ran because otherwise offsets in the TypeScript program would be
+      // shifted and individual migrations could no longer update the same source file.
+      fileSystem.commitEdits();
+
+      hasFailures = hasFailures || result.hasFailures;
+    }
+  };
+}
+
+/** Whether the given migration type refers to a devkit migration */
+export function isDevkitMigration(
+  value: MigrationCtor<any, any>,
+): value is DevkitMigrationCtor<any> {
+  return DevkitMigration.isPrototypeOf(value);
+}

package/schematics/schematics/ng-update/devkit-migration.ts

@@ -0,0 +1,47 @@
+/**
+ * @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 {SchematicContext, Tree} from '@angular-devkit/schematics';
+import {ProjectDefinition} from '@angular-devkit/core/src/workspace';
+import {Constructor, Migration, PostMigrationAction} from '../update-tool/migration';
+import {TargetVersion} from '../update-tool/target-version';
+
+export type DevkitContext = {
+  /** Devkit tree for the current migrations. Can be used to insert/remove files. */
+  tree: Tree;
+  /** Name of the project the migrations run against. */
+  projectName: string;
+  /** Workspace project the migrations run against. */
+  project: ProjectDefinition;
+  /** Whether the migrations run for a test target. */
+  isTestTarget: boolean;
+};
+
+export abstract class DevkitMigration<Data> extends Migration<Data, DevkitContext> {
+  /** Prints an informative message with context on the current target. */
+  protected printInfo(text: string) {
+    const targetName = this.context.isTestTarget ? 'test' : 'build';
+    this.logger.info(`- ${this.context.projectName}@${targetName}: ${text}`);
+  }
+
+  /**
+   * Optional static method that will be called once the migration of all project
+   * targets has been performed. This method can be used to make changes respecting the
+   * migration result of all individual targets. e.g. removing HammerJS if it
+   * is not needed in any project target.
+   */
+  static globalPostMigration?(
+    tree: Tree,
+    targetVersion: TargetVersion,
+    context: SchematicContext,
+  ): PostMigrationAction;
+}
+
+export type DevkitMigrationCtor<Data> = Constructor<DevkitMigration<Data>> & {
+  [m in keyof typeof DevkitMigration]: typeof DevkitMigration[m];
+};

package/schematics/schematics/ng-update/find-stylesheets.ts

@@ -0,0 +1,43 @@
+/**
+ * @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 {join, Path} from '@angular-devkit/core';
+import {Tree} from '@angular-devkit/schematics';
+
+/** Regular expression that matches stylesheet paths */
+const STYLESHEET_REGEX = /.*\.(css|scss)/;
+
+/**
+ * Finds stylesheets in the given directory from within the specified tree.
+ * @param tree Devkit tree where stylesheet files can be found in.
+ * @param startDirectory Optional start directory where stylesheets should be searched in.
+ *   This can be useful if only stylesheets within a given folder are relevant (to avoid
+ *   unnecessary iterations).
+ */
+export function findStylesheetFiles(tree: Tree, startDirectory: string = '/'): string[] {
+  const result: string[] = [];
+  const visitDir = (dirPath: Path) => {
+    const {subfiles, subdirs} = tree.getDir(dirPath);
+
+    subfiles.forEach(fileName => {
+      if (STYLESHEET_REGEX.test(fileName)) {
+        result.push(join(dirPath, fileName));
+      }
+    });
+
+    // Visit directories within the current directory to find other stylesheets.
+    subdirs.forEach(fragment => {
+      // Do not visit directories or files inside node modules or `dist/` folders.
+      if (fragment !== 'node_modules' && fragment !== 'dist') {
+        visitDir(join(dirPath, fragment));
+      }
+    });
+  };
+  visitDir(startDirectory as Path);
+  return result;
+}

package/schematics/schematics/ng-update/html-parsing/angular.ts

@@ -0,0 +1,49 @@
+/**
+ * @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 {findAttributeOnElementWithAttrs, findAttributeOnElementWithTag} from './elements';
+
+/** Finds the specified Angular @Input in the given elements with tag name. */
+export function findInputsOnElementWithTag(html: string, inputName: string, tagNames: string[]) {
+  return [
+    // Inputs can be also used without brackets (e.g. `<mat-toolbar color="primary">`)
+    ...findAttributeOnElementWithTag(html, inputName, tagNames),
+    // Add one column to the mapped offset because the first bracket for the @Input
+    // is part of the attribute and therefore also part of the offset. We only want to return
+    // the offset for the inner name of the bracketed input.
+    ...findAttributeOnElementWithTag(html, `[${inputName}]`, tagNames).map(offset => offset + 1),
+  ];
+}
+
+/** Finds the specified Angular @Input in elements that have one of the specified attributes. */
+export function findInputsOnElementWithAttr(html: string, inputName: string, attrs: string[]) {
+  return [
+    // Inputs can be also used without brackets (e.g. `<button mat-button color="primary">`)
+    ...findAttributeOnElementWithAttrs(html, inputName, attrs),
+    // Add one column to the mapped offset because the first bracket for the @Input
+    // is part of the attribute and therefore also part of the offset. We only want to return
+    // the offset for the inner name of the bracketed input.
+    ...findAttributeOnElementWithAttrs(html, `[${inputName}]`, attrs).map(offset => offset + 1),
+  ];
+}
+
+/** Finds the specified Angular @Output in the given elements with tag name. */
+export function findOutputsOnElementWithTag(html: string, outputName: string, tagNames: string[]) {
+  // Add one column to the mapped offset because the first parenthesis for the @Output
+  // is part of the attribute and therefore also part of the offset. We only want to return
+  // the offset for the inner name of the output.
+  return findAttributeOnElementWithTag(html, `(${outputName})`, tagNames).map(offset => offset + 1);
+}
+
+/** Finds the specified Angular @Output in elements that have one of the specified attributes. */
+export function findOutputsOnElementWithAttr(html: string, outputName: string, attrs: string[]) {
+  // Add one column to the mapped offset because the first bracket for the @Output
+  // is part of the attribute and therefore also part of the offset. We only want to return
+  // the offset for the inner name of the output.
+  return findAttributeOnElementWithAttrs(html, `(${outputName})`, attrs).map(offset => offset + 1);
+}

package/schematics/schematics/ng-update/html-parsing/elements.ts

@@ -0,0 +1,66 @@
+/**
+ * @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 {ChildNode, Element, parseFragment} from 'parse5';
+
+/**
+ * Parses a HTML fragment and traverses all AST nodes in order find elements that
+ * include the specified attribute.
+ */
+export function findElementsWithAttribute(html: string, attributeName: string) {
+  const document = parseFragment(html, {sourceCodeLocationInfo: true});
+  const elements: Element[] = [];
+
+  const visitNodes = (nodes: ChildNode[]) => {
+    nodes.forEach(n => {
+      const node = n as Element;
+
+      if (node.childNodes) {
+        visitNodes(node.childNodes);
+      }
+
+      if (node.attrs?.some(attr => attr.name === attributeName.toLowerCase())) {
+        elements.push(node);
+      }
+    });
+  };
+
+  visitNodes(document.childNodes);
+
+  return elements;
+}
+
+/**
+ * Finds elements with explicit tag names that also contain the specified attribute. Returns the
+ * attribute start offset based on the specified HTML.
+ */
+export function findAttributeOnElementWithTag(html: string, name: string, tagNames: string[]) {
+  return findElementsWithAttribute(html, name)
+    .filter(element => tagNames.includes(element.tagName))
+    .map(element => getStartOffsetOfAttribute(element, name));
+}
+
+/**
+ * Finds elements that contain the given attribute and contain at least one of the other
+ * specified attributes. Returns the primary attribute's start offset based on the specified HTML.
+ */
+export function findAttributeOnElementWithAttrs(html: string, name: string, attrs: string[]) {
+  return findElementsWithAttribute(html, name)
+    .filter(element => attrs.some(attr => hasElementAttribute(element, attr)))
+    .map(element => getStartOffsetOfAttribute(element, name));
+}
+
+/** Shorthand function that checks if the specified element contains the given attribute. */
+function hasElementAttribute(element: Element, attributeName: string): boolean {
+  return element.attrs && element.attrs.some(attr => attr.name === attributeName.toLowerCase());
+}
+
+/** Gets the start offset of the given attribute from a Parse5 element. */
+export function getStartOffsetOfAttribute(element: any, attributeName: string): number {
+  return element.sourceCodeLocation.attrs[attributeName.toLowerCase()].startOffset;
+}