From 1ccddcf2d7ce4498c34d2d17de0fc53c97e7cf5e Mon Sep 17 00:00:00 2001 From: Barsukov Nikita Date: Fri, 8 Jul 2022 11:59:12 +0300 Subject: [PATCH] feat!: replace deprecated directives with universal `tuiItem`-directive (#2069) * feat(kit)!: replace `*tuiTab` with `*tuiItem` * feat(kit)!: replace `*tuiBreadcrumb` with `*tuiItem` * feat(kit)!: replace `tuiToolbarTool` with `tuiItem` * chore(cdk): `schematics` add migrations for `*tuiTab`, `*tuiBreadcrumb`, `tuiToolbarTool` --- .../components/example/example.template.html | 2 +- .../src/components/page/page.template.html | 4 +- .../editor-new/editor-new.module.ts | 14 ++-- .../components/editor/editor.module.ts | 9 ++- .../components/toolbar-new/index.ts | 1 - .../toolbar-navigation-manager.directive.ts | 10 ++- .../toolbar-new/toolbar-new.module.ts | 14 ++-- .../toolbar-new/toolbar-new.template.html | 48 +++++++------- .../toolbar-new/toolbar-tool.directive.ts | 6 -- .../cdk/directives/item/item.directive.ts | 5 +- .../ng-update/constants/templates.ts | 27 ++++++++ .../ng-update/steps/migrate-templates.ts | 2 +- .../tests/schematic-replace-html.spec.ts | 64 ++++++++++++++++++- .../breadcrumbs/examples/1/index.html | 4 +- .../examples/import/insert-template.md | 2 +- .../editor-new/editor-new.module.ts | 14 ++-- .../editor-new/editor-new.template.html | 7 +- .../editor-new/examples/2/index.html | 14 +++- .../components/tabs/examples/4/index.html | 10 +-- .../components/tabs/examples/5/index.html | 4 +- .../components/tabs/examples/7/index.html | 2 +- .../components/tabs/tabs.template.html | 2 +- .../breadcrumbs/breadcrumb.directive.ts | 6 -- .../breadcrumbs-wrapper.component.ts | 6 +- .../breadcrumbs/breadcrumbs.module.ts | 21 +++--- projects/kit/components/breadcrumbs/index.ts | 1 - .../breadcrumbs-wrapper.component.spec.ts | 2 +- projects/kit/components/tabs/index.ts | 1 - projects/kit/components/tabs/tab.directive.ts | 10 --- .../tabs-with-more.component.ts | 4 +- projects/kit/components/tabs/tabs.module.ts | 7 +- 31 files changed, 193 insertions(+), 130 deletions(-) delete mode 100644 projects/addon-editor/components/toolbar-new/toolbar-tool.directive.ts delete mode 100644 projects/kit/components/breadcrumbs/breadcrumb.directive.ts delete mode 100644 projects/kit/components/tabs/tab.directive.ts diff --git a/projects/addon-doc/src/components/example/example.template.html b/projects/addon-doc/src/components/example/example.template.html index b7a4e6b5cd411..9bc4ba8087877 100644 --- a/projects/addon-doc/src/components/example/example.template.html +++ b/projects/addon-doc/src/components/example/example.template.html @@ -37,7 +37,7 @@ >
@@ -346,22 +346,22 @@ class="t-block" > diff --git a/projects/addon-editor/components/toolbar-new/toolbar-tool.directive.ts b/projects/addon-editor/components/toolbar-new/toolbar-tool.directive.ts deleted file mode 100644 index 9fad6b154581a..0000000000000 --- a/projects/addon-editor/components/toolbar-new/toolbar-tool.directive.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Directive} from '@angular/core'; - -@Directive({ - selector: `[tuiToolbarTool]`, -}) -export class TuiToolbarToolDirective {} diff --git a/projects/cdk/directives/item/item.directive.ts b/projects/cdk/directives/item/item.directive.ts index 7832e9da5aba6..61c2ffa0547d4 100644 --- a/projects/cdk/directives/item/item.directive.ts +++ b/projects/cdk/directives/item/item.directive.ts @@ -1,10 +1,9 @@ import {Directive} from '@angular/core'; /** - * Blank directive to query for {@link TemplateRef} - * TODO: 3.0 Migrate everything to this directive + * Blank directive for queries via `@ContentChildren` / `@ViewChildren` / `querySelector` */ @Directive({ - selector: `ng-template[tuiItem]`, + selector: '[tuiItem]', }) export class TuiItemDirective {} diff --git a/projects/cdk/schematics/ng-update/constants/templates.ts b/projects/cdk/schematics/ng-update/constants/templates.ts index 7999fde280599..86bab1d823149 100644 --- a/projects/cdk/schematics/ng-update/constants/templates.ts +++ b/projects/cdk/schematics/ng-update/constants/templates.ts @@ -92,6 +92,33 @@ export const ATTRS_TO_REPLACE: ReplacementAttributes[] = [ attrName: '[step]', }, }, + { + from: { + attrName: '*tuiTab', + withTagNames: ['*'], + }, + to: { + attrName: '*tuiItem', + }, + }, + { + from: { + attrName: '*tuiBreadcrumb', + withTagNames: ['*'], + }, + to: { + attrName: '*tuiItem', + }, + }, + { + from: { + attrName: 'tuiToolbarTool', + withTagNames: ['*'], + }, + to: { + attrName: 'tuiItem', + }, + }, ]; export const INPUTS_TO_REMOVE: InputToRemove[] = [ diff --git a/projects/cdk/schematics/ng-update/steps/migrate-templates.ts b/projects/cdk/schematics/ng-update/steps/migrate-templates.ts index e1e03d6d161e7..91f1a10e8b3b5 100644 --- a/projects/cdk/schematics/ng-update/steps/migrate-templates.ts +++ b/projects/cdk/schematics/ng-update/steps/migrate-templates.ts @@ -212,7 +212,7 @@ function replaceBreadcrumbs({ ` diff --git a/projects/cdk/schematics/ng-update/tests/schematic-replace-html.spec.ts b/projects/cdk/schematics/ng-update/tests/schematic-replace-html.spec.ts index d6f84d8d32a10..a136845f344ac 100644 --- a/projects/cdk/schematics/ng-update/tests/schematic-replace-html.spec.ts +++ b/projects/cdk/schematics/ng-update/tests/schematic-replace-html.spec.ts @@ -44,7 +44,11 @@ const TEMPLATE_BEFORE = ` - + + + + +
@@ -134,6 +138,31 @@ const TEMPLATE_BEFORE = ` + + + + + + + + + + {{ item.caption }} + + + `; const TEMPLATE_AFTER = ` @@ -152,7 +181,11 @@ const TEMPLATE_AFTER = ` - + + + + +
@@ -180,7 +213,7 @@ const TEMPLATE_AFTER = ` @@ -251,6 +284,31 @@ const TEMPLATE_AFTER = ` + + + + + + + + + + {{ item.caption }} + + + `; const COMPONENT_BEFORE = ` diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.html b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.html index bccec3b1ee229..846450d10bb92 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.html +++ b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.html @@ -1,7 +1,7 @@ @@ -16,7 +16,7 @@ > diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md b/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md index 29e66f9033840..90aa3c35424f8 100644 --- a/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md +++ b/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md @@ -2,7 +2,7 @@ diff --git a/projects/demo/src/modules/components/editor-new/editor-new.module.ts b/projects/demo/src/modules/components/editor-new/editor-new.module.ts index d6036bdb0ae3d..4675d8086fb55 100644 --- a/projects/demo/src/modules/components/editor-new/editor-new.module.ts +++ b/projects/demo/src/modules/components/editor-new/editor-new.module.ts @@ -2,8 +2,8 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiEditorNewModule, TuiEditorSocketModule} from '@taiga-ui/addon-editor'; +import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc'; +import {TuiEditorModule, TuiEditorSocketModule} from '@taiga-ui/addon-editor'; import { TuiButtonModule, TuiLinkModule, @@ -14,20 +14,19 @@ import { import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module'; import {ExampleEditorNewComponent} from './editor-new.component'; import {TuiEditorNewExample1} from './examples/1'; -import {ExampleSmilesToolModule} from './examples/1/smiles-tool/smiles-tool.module'; import {TuiEditorNewExample2} from './examples/2'; +import {ExampleSmilesToolModule} from './examples/2/smiles-tool/smiles-tool.module'; import {TuiEditorNewExample3} from './examples/3'; -import {ImagePreviewExampleModule} from './examples/3/image-preview/image-preview.module'; import {TuiEditorNewExample4} from './examples/4'; +import {ImagePreviewExampleModule} from './examples/4/image-preview/image-preview.module'; import {TuiEditorNewExample5} from './examples/5'; -import {TuiEditorNewExample6} from './examples/6'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, - TuiEditorNewModule, + TuiEditorModule, TuiEditorSocketModule, TuiNotificationModule, TuiButtonModule, @@ -37,7 +36,7 @@ import {TuiEditorNewExample6} from './examples/6'; TuiSvgModule, ExampleSmilesToolModule, ImagePreviewExampleModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleEditorNewComponent)), + RouterModule.forChild(generateRoutes(ExampleEditorNewComponent)), ], declarations: [ ExampleEditorNewComponent, @@ -45,7 +44,6 @@ import {TuiEditorNewExample6} from './examples/6'; TuiEditorNewExample2, TuiEditorNewExample3, TuiEditorNewExample4, - TuiEditorNewExample6, TuiEditorNewExample5, ], exports: [ExampleEditorNewComponent], diff --git a/projects/demo/src/modules/components/editor-new/editor-new.template.html b/projects/demo/src/modules/components/editor-new/editor-new.template.html index 1dbdb9d3bf5a5..c0fdbe6904500 100644 --- a/projects/demo/src/modules/components/editor-new/editor-new.template.html +++ b/projects/demo/src/modules/components/editor-new/editor-new.template.html @@ -37,7 +37,7 @@ heading="Custom tool" [content]="example1" > - You can create your own tool: +

You can create your own tool:

    <tui-editor> . +
  • + Mark every tool wrapper with + tuiItem + -directive +
diff --git a/projects/demo/src/modules/components/editor-new/examples/2/index.html b/projects/demo/src/modules/components/editor-new/examples/2/index.html index d9bb1348700f7..b1b4ad1f7d28c 100644 --- a/projects/demo/src/modules/components/editor-new/examples/2/index.html +++ b/projects/demo/src/modules/components/editor-new/examples/2/index.html @@ -3,7 +3,15 @@ class="editor" [formControl]="control" [tools]="builtInTools" -> +> + Smiles are custom tool. Try it. -

HTML:

- + + + + + + click it + + + diff --git a/projects/demo/src/modules/components/tabs/examples/4/index.html b/projects/demo/src/modules/components/tabs/examples/4/index.html index ba5493d00d6bc..d37121f290b8b 100644 --- a/projects/demo/src/modules/components/tabs/examples/4/index.html +++ b/projects/demo/src/modules/components/tabs/examples/4/index.html @@ -3,7 +3,7 @@ [(activeItemIndex)]="activeItemIndex" >