From 5ab25d0232bd5207e9a9f6bf16fc58ad9a05c92f Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 23 Aug 2022 15:34:13 +0000 Subject: [PATCH] fix(material/schematics): make ts import replacements more specific (#25504) * fix(material/schematics): make ts import replacements more specific * fixup! fix(material/schematics): make ts import replacements more specific * fixup! fix(material/schematics): make ts import replacements more specific --- .../legacy-components-v15/constants.ts | 26 ++++++------ .../migrations/legacy-components-v15/index.ts | 40 ++++++++++++++----- .../v15/legacy-components-v15.spec.ts | 7 ++++ 3 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts index d2ac36991326..c5925136ba2f 100644 --- a/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts +++ b/src/material/schematics/ng-update/migrations/legacy-components-v15/constants.ts @@ -9,15 +9,15 @@ export const COMPONENTS = [ 'autocomplete', 'button', + 'core', 'card', 'checkbox', 'chips', 'dialog', 'form-field', 'input', + 'list', 'menu', - 'option', - 'optgroup', 'paginator', 'progress-bar', 'progress-spinner', @@ -31,19 +31,19 @@ export const COMPONENTS = [ 'tooltip', ]; -export const MIXINS = COMPONENTS.flatMap(component => [ +export const MAT_IMPORT_CHANGES = COMPONENTS.map(component => ({ + old: `@angular/material/${component}`, + new: `@angular/material/legacy-${component}`, +})); + +export const MDC_IMPORT_CHANGES = COMPONENTS.map(component => ({ + old: `@angular/material-experimental/mdc-${component}`, + new: `@angular/material/${component}`, +})); + +export const MIXINS = COMPONENTS.concat(['option', 'optgroup']).flatMap(component => [ `${component}-theme`, `${component}-color`, `${component}-density`, `${component}-typography`, ]); - -export const MAT_IMPORT_CHANGE = { - old: '@angular/material/', - new: '@angular/material/legacy-', -}; - -export const MAT_MDC_IMPORT_CHANGE = { - old: '@angular/material-experimental/mdc-', - new: '@angular/material/', -}; diff --git a/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts b/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts index a5ef03c155e6..5156fde94ea5 100644 --- a/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts +++ b/src/material/schematics/ng-update/migrations/legacy-components-v15/index.ts @@ -10,7 +10,7 @@ import * as ts from 'typescript'; import * as postcss from 'postcss'; import * as scss from 'postcss-scss'; -import {MAT_IMPORT_CHANGE, MAT_MDC_IMPORT_CHANGE, MIXINS} from './constants'; +import {MAT_IMPORT_CHANGES, MDC_IMPORT_CHANGES, MIXINS} from './constants'; import {Migration, ResolvedResource, TargetVersion, WorkspacePath} from '@angular/cdk/schematics'; @@ -109,16 +109,19 @@ export class LegacyComponentsMigration extends Migration { */ private _handleImportDeclaration(node: ts.ImportDeclaration): void { const moduleSpecifier = node.moduleSpecifier as ts.StringLiteral; - if (moduleSpecifier.text.startsWith(MAT_IMPORT_CHANGE.old)) { - this._tsReplaceAt(node, MAT_IMPORT_CHANGE); + + const matImportChange = this._findMatImportChange(moduleSpecifier); + if (matImportChange) { + this._tsReplaceAt(node, matImportChange); if (node.importClause?.namedBindings && ts.isNamedImports(node.importClause.namedBindings)) { this._handleNamedImportBindings(node.importClause.namedBindings); } } - if (moduleSpecifier.text.startsWith(MAT_MDC_IMPORT_CHANGE.old)) { - this._tsReplaceAt(node, MAT_MDC_IMPORT_CHANGE); + const mdcImportChange = this._findMdcImportChange(moduleSpecifier); + if (mdcImportChange) { + this._tsReplaceAt(node, mdcImportChange); } } @@ -128,12 +131,16 @@ export class LegacyComponentsMigration extends Migration { */ private _handleImportExpression(node: ts.CallExpression): void { const moduleSpecifier = node.arguments[0] as ts.StringLiteral; - if (moduleSpecifier.text.startsWith(MAT_IMPORT_CHANGE.old)) { - this._tsReplaceAt(node, MAT_IMPORT_CHANGE); + + const matImportChange = this._findMatImportChange(moduleSpecifier); + if (matImportChange) { + this._tsReplaceAt(node, matImportChange); + return; } - if (moduleSpecifier.text.startsWith(MAT_MDC_IMPORT_CHANGE.old)) { - this._tsReplaceAt(node, MAT_MDC_IMPORT_CHANGE); + const mdcImportChange = this._findMdcImportChange(moduleSpecifier); + if (mdcImportChange) { + this._tsReplaceAt(node, mdcImportChange); } } @@ -167,7 +174,8 @@ export class LegacyComponentsMigration extends Migration { !!node.initializer && ts.isAwaitExpression(node.initializer) && this._isImportCallExpression(node.initializer.expression) && - node.initializer.expression.arguments[0].text.startsWith(MAT_IMPORT_CHANGE.old) && + ts.isStringLiteral(node.initializer.expression.arguments[0]) && + !!this._findMatImportChange(node.initializer.expression.arguments[0]) && ts.isObjectBindingPattern(node.name) ); } @@ -184,6 +192,18 @@ export class LegacyComponentsMigration extends Migration { ); } + private _findMatImportChange( + moduleSpecifier: ts.StringLiteral, + ): {old: string; new: string} | undefined { + return MAT_IMPORT_CHANGES.find(change => change.old === moduleSpecifier.text); + } + + private _findMdcImportChange( + moduleSpecifier: ts.StringLiteral, + ): {old: string; new: string} | undefined { + return MDC_IMPORT_CHANGES.find(change => change.old === moduleSpecifier.text); + } + /** Updates the source file of the given ts node with the given replacements. */ private _tsReplaceAt(node: ts.Node, str: {old: string; new: string}): void { const filePath = this.fileSystem.resolve(node.getSourceFile().fileName); diff --git a/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts b/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts index 7187ecfafa1d..a5eb2f540c8c 100644 --- a/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts +++ b/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts @@ -81,6 +81,13 @@ describe('v15 legacy components migration', () => { new: `import('@angular/material/legacy-button').then(() => {});`, }); }); + + it('does not update non-legacy imports', async () => { + await runTypeScriptMigrationTest('named binding', { + old: `import {MatButtonToggleModule} from '@angular/material/button-toggle';`, + new: `import {MatButtonToggleModule} from '@angular/material/button-toggle';`, + }); + }); }); describe('material-experimental --> material', () => {