From b215efa41a78289c07efb66b006781649de9a74d Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Wed, 16 Sep 2020 17:30:02 +0800 Subject: [PATCH] refactor(module:form,grid): remove deprecated APIs for v10 (#5788) BREAKING CHANGES: - `nz-form-item[nzFlex]` has been removed. Please manually remove this input. - `nz-form-item[nzType]` has been removed. Please manually remove this input. - `nz-row[nzType]` has been removed. Please manually remove this input. --- components/form/form-item.component.ts | 23 +----- components/grid/row.directive.ts | 4 - schematics/ng-update/data/property-names.ts | 2 +- schematics/ng-update/index.ts | 30 +++---- .../test-cases/v10/grid-deprecated.spec.ts | 78 +++++++++++++++++++ .../v9/secondary-entry-points.spec.ts | 1 - .../checks/grid-template-rule.ts | 31 ++++++++ schematics/utils/ng-update/elements.ts | 8 +- 8 files changed, 136 insertions(+), 41 deletions(-) create mode 100644 schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts create mode 100644 schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts diff --git a/components/form/form-item.component.ts b/components/form/form-item.component.ts index 9c803f183c6..87bf953b4fc 100644 --- a/components/form/form-item.component.ts +++ b/components/form/form-item.component.ts @@ -3,18 +3,8 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - Input, - OnDestroy, - Renderer2, - ViewEncapsulation -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, Renderer2, ViewEncapsulation } from '@angular/core'; -import { warnDeprecation } from 'ng-zorro-antd/core/logger'; import { Subject } from 'rxjs'; export type NzFormControlStatusType = 'success' | 'error' | 'warning' | 'validating' | null; @@ -34,16 +24,11 @@ export type NzFormControlStatusType = 'success' | 'error' | 'warning' | 'validat '[class.ant-form-item-has-feedback]': 'hasFeedback && status', '[class.ant-form-item-with-help]': 'withHelpClass' }, - template: ` ` + template: ` + + ` }) export class NzFormItemComponent implements OnDestroy, OnDestroy { - /** - * @deprecated 10.0.0. 'nzFlex' is deprecated and going to be removed in 10.0.0. - */ - @Input() set nzFlex(_: boolean) { - warnDeprecation(`'nzFlex' is deprecated and going to be removed in 10.0.0.`); - } - status: NzFormControlStatusType = null; hasFeedback = false; withHelpClass = false; diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts index 97e15aae1ce..03c23cdafba 100644 --- a/components/grid/row.directive.ts +++ b/components/grid/row.directive.ts @@ -30,10 +30,6 @@ export type NzAlign = 'top' | 'middle' | 'bottom'; } }) export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy { - /** - * @deprecated don't need nzType="flex" after 9.0 - */ - @Input() nzType: 'flex' | null = 'flex'; @Input() nzAlign: NzAlign | null = null; @Input() nzJustify: NzJustify | null = null; @Input() nzGutter: number | IndexableObject | [number, number] | [IndexableObject, IndexableObject] | null = null; diff --git a/schematics/ng-update/data/property-names.ts b/schematics/ng-update/data/property-names.ts index 9e6f94a76a5..b5527c25c33 100644 --- a/schematics/ng-update/data/property-names.ts +++ b/schematics/ng-update/data/property-names.ts @@ -4,7 +4,7 @@ import { PropertyNameUpgradeData, TargetVersion, VersionChanges } from '@angular export const propertyNames: VersionChanges = { [TargetVersion.V10]: [ { - pr: '', + pr: 'https://github.com/NG-ZORRO/ng-zorro-antd/pull/5779', changes: [ { replace: 'nzPosition', diff --git a/schematics/ng-update/index.ts b/schematics/ng-update/index.ts index 3be5b11fad1..e371a7cffb2 100644 --- a/schematics/ng-update/index.ts +++ b/schematics/ng-update/index.ts @@ -1,6 +1,5 @@ -import { Rule } from '@angular-devkit/schematics'; +import { Rule, SchematicContext } from '@angular-devkit/schematics'; import { createMigrationSchematicRule, NullableDevkitMigration, TargetVersion } from '@angular/cdk/schematics'; -import chalk from 'chalk'; import { ClassNamesMigration } from './data/migrations/class-names'; import { ruleUpgradeData } from './upgrade-data'; import { CalendarTemplateRule } from './upgrade-rules/checks/calendar-input-rule'; @@ -8,6 +7,7 @@ import { CarouselTemplateRule } from "./upgrade-rules/checks/carousel-like-templ import { DropdownClassRule } from './upgrade-rules/checks/dropdown-class-rule'; import { DropdownTemplateRule } from './upgrade-rules/checks/dropdown-template-rule'; import { FormTemplateRule } from './upgrade-rules/checks/form-template-rule'; +import { GridTemplateRule } from './upgrade-rules/checks/grid-template-rule'; import { IconTemplateRule } from './upgrade-rules/checks/icon-template-rule'; import { InjectionTokenRule } from "./upgrade-rules/checks/injection-token-rule"; import { SecondaryEntryPointsRule } from './upgrade-rules/checks/secondary-entry-points-rule'; @@ -22,6 +22,7 @@ const migrations: NullableDevkitMigration[] = [ CarouselTemplateRule, InjectionTokenRule, FormTemplateRule, + GridTemplateRule, SecondaryEntryPointsRule, ClassNamesMigration ]; @@ -42,16 +43,17 @@ export function updateToV10(): Rule { } /** Post-update schematic to be called when update is finished. */ -export function postUpdate(): Rule { - return () => { - console.log(); - console.log(chalk.green(' ✓ NG-ZORRO update complete')); - console.log(); - console.log( - chalk.yellow( - ' ⚠ Please check the output above for any issues that were detected ' + - 'but could not be automatically fixed.' - ) - ); - }; +export function postUpdate(context: SchematicContext, targetVersion: TargetVersion, + hasFailures: boolean): void { + + context.logger.info(''); + context.logger.info(` ✓ Updated NG-ZORRO to ${targetVersion}`); + context.logger.info(''); + + if (hasFailures) { + context.logger.warn( + ' ⚠ Some issues were detected but could not be fixed automatically. Please check the ' + + 'output above and fix these issues manually.'); + } + } diff --git a/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts b/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts new file mode 100644 index 00000000000..64f851a70c5 --- /dev/null +++ b/schematics/ng-update/test-cases/v10/grid-deprecated.spec.ts @@ -0,0 +1,78 @@ +import { getSystemPath, normalize, virtualFs } from '@angular-devkit/core'; +import { TempScopedNodeJsSyncHost } from '@angular-devkit/core/node/testing'; +import { HostTree } from '@angular-devkit/schematics'; +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; +import * as shx from 'shelljs'; +import { SchematicsTestNGConfig, SchematicsTestTsConfig } from '../config'; + +describe('v10 form components migration', () => { + let runner: SchematicTestRunner; + let host: TempScopedNodeJsSyncHost; + let tree: UnitTestTree; + let tmpDirPath: string; + let previousWorkingDir: string; + let warnOutput: string[]; + + beforeEach(() => { + runner = new SchematicTestRunner('test', require.resolve('../../../migration.json')); + host = new TempScopedNodeJsSyncHost(); + tree = new UnitTestTree(new HostTree(host)); + + writeFile('/tsconfig.json', JSON.stringify(SchematicsTestTsConfig)); + writeFile('/angular.json', JSON.stringify(SchematicsTestNGConfig)); + + warnOutput = []; + runner.logger.subscribe(logEntry => { + if (logEntry.level === 'warn') { + warnOutput.push(logEntry.message); + } + }); + + previousWorkingDir = shx.pwd(); + tmpDirPath = getSystemPath(host.root); + + shx.cd(tmpDirPath); + + writeFakeAngular(); + }); + + afterEach(() => { + shx.cd(previousWorkingDir); + shx.rm('-r', tmpDirPath); + }); + + function writeFakeAngular(): void { writeFile('/node_modules/@angular/core/index.d.ts', ``); } + + function writeFile(filePath: string, contents: string): void { + host.sync.write(normalize(filePath), virtualFs.stringToFileBuffer(contents)); + } + + // tslint:disable-next-line:no-any + async function runMigration(): Promise { + await runner.runSchematicAsync('migration-v10', {}, tree).toPromise(); + } + + describe('form components', () => { + + it('should properly report deprecated input', async() => { + writeFile('/index.ts', `; + import {Component} from '@angular/core' + @Component({ + template: \` + + + + \` + }) + export class MyComp { + }`); + await runMigration(); + const output = warnOutput.toString(); + expect(output).toContain( '/index.ts@5:23 - Found deprecated input \'[nzFlex]\'.'); + expect(output).toContain( '/index.ts@6:17 - Found deprecated input \'[nzFlex]\'.'); + expect(output).toContain( '/index.ts@7:23 - Found deprecated input \'[nzFlex]\'.'); + }); + + }); + +}); diff --git a/schematics/ng-update/test-cases/v9/secondary-entry-points.spec.ts b/schematics/ng-update/test-cases/v9/secondary-entry-points.spec.ts index 687197a80ff..37df9703936 100644 --- a/schematics/ng-update/test-cases/v9/secondary-entry-points.spec.ts +++ b/schematics/ng-update/test-cases/v9/secondary-entry-points.spec.ts @@ -66,7 +66,6 @@ describe('secondary entry points checks', () => { const warnLines = ['index.ts@2:7', 'index.ts@3:7', 'index.ts@5:7']; - expect(warnOutput.length).toBe(warnLines.length); warnLines.forEach(line => { expect(warnOutput.toString()).toContain(`/${line} - The entry-point "ng-zorro-antd/core" is remove.`); }); diff --git a/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts b/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts new file mode 100644 index 00000000000..fa3ff24e725 --- /dev/null +++ b/schematics/ng-update/upgrade-rules/checks/grid-template-rule.ts @@ -0,0 +1,31 @@ +import { + findInputsOnElementWithAttr, + findInputsOnElementWithTag, + Migration, + ResolvedResource, + TargetVersion, + UpgradeData +} from '@angular/cdk/schematics'; + +export class GridTemplateRule extends Migration { + + enabled = this.targetVersion === TargetVersion.V10; + + visitTemplate(template: ResolvedResource): void { + + const offsets = [] + + offsets.push(...findInputsOnElementWithAttr(template.content, 'nzType', ['nz-row'])) + offsets.push(...findInputsOnElementWithTag(template.content, 'nzType', ['nz-form-item', 'nz-row'])) + offsets.push(...findInputsOnElementWithTag(template.content, 'nzFlex', ['nz-form-item'])) + + offsets.forEach(offset => { + this.failures.push({ + filePath: template.filePath, + position: template.getCharacterAndLineOfPosition(offset), + message: `Found deprecated input '[nzFlex]'. Please manually remove this input.` + }); + }) + + } +} diff --git a/schematics/utils/ng-update/elements.ts b/schematics/utils/ng-update/elements.ts index c584cb2c999..bb7e9af6e03 100644 --- a/schematics/utils/ng-update/elements.ts +++ b/schematics/utils/ng-update/elements.ts @@ -22,7 +22,9 @@ export function findElementWithTag(html: string, tagName: string): number[] { visitNodes(document.childNodes); - return elements.map(element => element.sourceCodeLocation.startTag.startOffset) + return elements + .filter(e => e?.sourceCodeLocation?.startTag) + .map(element => element.sourceCodeLocation.startTag.startOffset) } export function findElementWithClassName(html: string, className: string, tagName: string): number[] { @@ -43,5 +45,7 @@ export function findElementWithClassName(html: string, className: string, tagNam visitNodes(document.childNodes); - return elements.map(element => element.sourceCodeLocation.attrs.class.startOffset) + return elements + .filter(e => e?.sourceCodeLocation?.startTag) + .map(element => element.sourceCodeLocation.attrs.class.startOffset) }