From 7854cde20f6bc2ef4e15def74aaf2eec60c0bda2 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 15 Apr 2024 15:16:17 -0400 Subject: [PATCH] [ACS-7382] Standalone core directives, improved lint performance (#9559) --- lib/core/.eslintignore | 1 + .../src/lib/directives/directive.module.ts | 27 ++--------------- .../src/lib/directives/highlight.directive.ts | 16 +++++----- .../infinite-select-scroll.directive.spec.ts | 29 +++++++------------ .../infinite-select-scroll.directive.ts | 19 ++++++------ .../src/lib/directives/logout.directive.ts | 20 ++++++------- lib/core/src/lib/directives/public-api.ts | 6 ++-- .../tooltip-card/tooltip-card.component.ts | 15 ++++------ .../tooltip-card.directive.spec.ts | 25 ++++++++-------- .../tooltip-card/tooltip-card.directive.ts | 23 +++++++-------- .../src/lib/directives/upload.directive.ts | 3 +- lib/extensions/.eslintignore | 2 ++ lib/insights/.eslintignore | 2 ++ lib/js-api/.eslintignore | 3 ++ lib/process-services-cloud/.eslintignore | 1 + lib/process-services/.eslintignore | 2 ++ 16 files changed, 86 insertions(+), 108 deletions(-) create mode 100644 lib/extensions/.eslintignore create mode 100644 lib/insights/.eslintignore create mode 100644 lib/js-api/.eslintignore create mode 100644 lib/process-services/.eslintignore diff --git a/lib/core/.eslintignore b/lib/core/.eslintignore index abb75b0d35..16523ff94f 100644 --- a/lib/core/.eslintignore +++ b/lib/core/.eslintignore @@ -1 +1,2 @@ .storybook +coverage diff --git a/lib/core/src/lib/directives/directive.module.ts b/lib/core/src/lib/directives/directive.module.ts index 72029bd730..8ec5c67d36 100644 --- a/lib/core/src/lib/directives/directive.module.ts +++ b/lib/core/src/lib/directives/directive.module.ts @@ -15,38 +15,17 @@ * limitations under the License. */ -import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MaterialModule } from '../material.module'; - import { HighlightDirective } from './highlight.directive'; import { LogoutDirective } from './logout.directive'; import { UploadDirective } from './upload.directive'; import { TooltipCardDirective } from './tooltip-card/tooltip-card.directive'; -import { OverlayModule } from '@angular/cdk/overlay'; import { TooltipCardComponent } from './tooltip-card/tooltip-card.component'; import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive'; @NgModule({ - imports: [ - CommonModule, - MaterialModule, - OverlayModule - ], - declarations: [ - HighlightDirective, - LogoutDirective, - UploadDirective, - TooltipCardDirective, - TooltipCardComponent, - InfiniteSelectScrollDirective - ], - exports: [ - HighlightDirective, - LogoutDirective, - UploadDirective, - TooltipCardDirective, - InfiniteSelectScrollDirective - ] + imports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective], + exports: [HighlightDirective, LogoutDirective, UploadDirective, TooltipCardDirective, TooltipCardComponent, InfiniteSelectScrollDirective] }) +/** @deprecated This module is deprecated and will be removed in a future release. Please consider importing standalone components and directives directly. */ export class DirectiveModule {} diff --git a/lib/core/src/lib/directives/highlight.directive.ts b/lib/core/src/lib/directives/highlight.directive.ts index 273fac1d63..581ceadec2 100644 --- a/lib/core/src/lib/directives/highlight.directive.ts +++ b/lib/core/src/lib/directives/highlight.directive.ts @@ -21,10 +21,10 @@ import { Directive, ElementRef, Input, Renderer2, AfterViewChecked } from '@angu import { HighlightTransformService, HighlightTransformResult } from '../common/services/highlight-transform.service'; @Directive({ - selector: '[adf-highlight]' + selector: '[adf-highlight]', + standalone: true }) export class HighlightDirective implements AfterViewChecked { - /** Class selector for highlightable elements. */ @Input('adf-highlight-selector') selector: string = ''; @@ -37,11 +37,7 @@ export class HighlightDirective implements AfterViewChecked { @Input('adf-highlight-class') classToApply: string = 'adf-highlight'; - constructor( - private el: ElementRef, - private renderer: Renderer2, - private highlightTransformService: HighlightTransformService) { - } + constructor(private el: ElementRef, private renderer: Renderer2, private highlightTransformService: HighlightTransformService) {} ngAfterViewChecked() { this.highlight(); @@ -52,7 +48,11 @@ export class HighlightDirective implements AfterViewChecked { const elements = this.el.nativeElement.querySelectorAll(selector); elements.forEach((element) => { - const highlightTransformResult: HighlightTransformResult = this.highlightTransformService.highlight(element.innerHTML, search, classToApply); + const highlightTransformResult: HighlightTransformResult = this.highlightTransformService.highlight( + element.innerHTML, + search, + classToApply + ); if (highlightTransformResult.changed) { this.renderer.setProperty(element, 'innerHTML', highlightTransformResult.text); } diff --git a/lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts b/lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts index 5ef9f7c2ab..362de047e1 100644 --- a/lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts +++ b/lib/core/src/lib/directives/infinite-select-scroll.directive.spec.ts @@ -18,22 +18,21 @@ import { Component, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing'; import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive'; -import { MatSelect, MatSelectModule } from '@angular/material/select'; +import { MatSelect, MatSelectModule } from '@angular/material/select'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { MatSelectHarness } from '@angular/material/select/testing'; @Component({ - template: ` - - - {{ option.text }} - - ` + template: ` + + {{ option.text }} + + ` }) class TestComponent { - options = new Array(50).fill({text: 'dummy'}); + options = new Array(50).fill({ text: 'dummy' }); @ViewChild(MatSelect, { static: true }) matSelect: MatSelect; @@ -43,7 +42,7 @@ class TestComponent { } load() { - this.options.push(...new Array(10).fill({text: 'dummy'})); + this.options.push(...new Array(10).fill({ text: 'dummy' })); } } @@ -54,14 +53,8 @@ describe('InfiniteSelectScrollDirective', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ - MatSelectModule, - NoopAnimationsModule - ], - declarations: [ - TestComponent, - InfiniteSelectScrollDirective - ] + imports: [MatSelectModule, NoopAnimationsModule, InfiniteSelectScrollDirective], + declarations: [TestComponent] }); fixture = TestBed.createComponent(TestComponent); component = fixture.componentInstance; @@ -77,7 +70,7 @@ describe('InfiniteSelectScrollDirective', () => { it('should call an action on scrollEnd event', async () => { const select = await loader.getHarness(MatSelectHarness); - const panel = (await select.host()); + const panel = await select.host(); await panel.dispatchEvent('scrollEnd'); diff --git a/lib/core/src/lib/directives/infinite-select-scroll.directive.ts b/lib/core/src/lib/directives/infinite-select-scroll.directive.ts index ab59aaf451..52ed04b595 100644 --- a/lib/core/src/lib/directives/infinite-select-scroll.directive.ts +++ b/lib/core/src/lib/directives/infinite-select-scroll.directive.ts @@ -23,7 +23,8 @@ import { takeUntil } from 'rxjs/operators'; const SELECT_ITEM_HEIGHT_EM = 3; @Directive({ - selector: '[adf-infinite-select-scroll]' + selector: '[adf-infinite-select-scroll]', + standalone: true }) export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy { static readonly MAX_ITEMS = 50; @@ -37,14 +38,12 @@ export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy { constructor(@Inject(MatSelect) private matSelect: MatSelect) {} ngAfterViewInit() { - this.matSelect.openedChange - .pipe(takeUntil(this.onDestroy$)) - .subscribe((opened: boolean) => { - if (opened) { - this.itemHeightToWaitBeforeLoadNext = (this.getItemHeight() * (InfiniteSelectScrollDirective.MAX_ITEMS / 2)); - this.matSelect.panel.nativeElement.addEventListener('scroll', (event: Event) => this.handleScrollEvent(event)); - } - }); + this.matSelect.openedChange.pipe(takeUntil(this.onDestroy$)).subscribe((opened: boolean) => { + if (opened) { + this.itemHeightToWaitBeforeLoadNext = this.getItemHeight() * (InfiniteSelectScrollDirective.MAX_ITEMS / 2); + this.matSelect.panel.nativeElement.addEventListener('scroll', (event: Event) => this.handleScrollEvent(event)); + } + }); } ngOnDestroy() { @@ -60,7 +59,7 @@ export class InfiniteSelectScrollDirective implements AfterViewInit, OnDestroy { private isScrollInNextFetchArea(event: Event): boolean { const target = event.target as HTMLElement; - return target.scrollTop >= (target.scrollHeight - target.offsetHeight - this.itemHeightToWaitBeforeLoadNext); + return target.scrollTop >= target.scrollHeight - target.offsetHeight - this.itemHeightToWaitBeforeLoadNext; } private getItemHeight(): number { diff --git a/lib/core/src/lib/directives/logout.directive.ts b/lib/core/src/lib/directives/logout.directive.ts index e4d446abaf..abb961a308 100644 --- a/lib/core/src/lib/directives/logout.directive.ts +++ b/lib/core/src/lib/directives/logout.directive.ts @@ -21,10 +21,10 @@ import { AppConfigService } from '../app-config/app-config.service'; import { AuthenticationService } from '../auth/services/authentication.service'; @Directive({ - selector: '[adf-logout]' + selector: '[adf-logout]', + standalone: true }) export class LogoutDirective implements OnInit { - /** URI to redirect to after logging out. */ @Input() redirectUri: string; @@ -33,15 +33,15 @@ export class LogoutDirective implements OnInit { @Input() enableRedirect: boolean = true; - constructor(private elementRef: ElementRef, - private renderer: Renderer2, - private router: Router, - private appConfig: AppConfigService, - private authenticationService: AuthenticationService) { - } + constructor( + private elementRef: ElementRef, + private renderer: Renderer2, + private router: Router, + private appConfig: AppConfigService, + private authenticationService: AuthenticationService + ) {} ngOnInit() { - if (this.elementRef.nativeElement) { this.renderer.listen(this.elementRef.nativeElement, 'click', (evt) => { evt.preventDefault(); @@ -51,7 +51,7 @@ export class LogoutDirective implements OnInit { } getRedirectUri() { - if (this.redirectUri === undefined ) { + if (this.redirectUri === undefined) { return this.appConfig.get('loginRoute', '/login'); } return this.redirectUri; diff --git a/lib/core/src/lib/directives/public-api.ts b/lib/core/src/lib/directives/public-api.ts index c002fbc0f6..6ef01f0990 100644 --- a/lib/core/src/lib/directives/public-api.ts +++ b/lib/core/src/lib/directives/public-api.ts @@ -15,10 +15,12 @@ * limitations under the License. */ +export * from './tooltip-card/tooltip-card.directive'; +export * from './tooltip-card/tooltip-card.component'; + export * from './highlight.directive'; +export * from './infinite-select-scroll.directive'; export * from './logout.directive'; export * from './upload.directive'; -export * from './tooltip-card/tooltip-card.directive'; -export * from './infinite-select-scroll.directive'; export * from './directive.module'; diff --git a/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.ts b/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.ts index 0cb52ecf4d..863a93d4fb 100644 --- a/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.ts +++ b/lib/core/src/lib/directives/tooltip-card/tooltip-card.component.ts @@ -18,21 +18,18 @@ import { Component, Input, SecurityContext } from '@angular/core'; import { animate, style, transition, trigger } from '@angular/animations'; import { DomSanitizer } from '@angular/platform-browser'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'adf-tooltip-card-component', + standalone: true, + imports: [CommonModule], templateUrl: './tooltip-card.component.html', styleUrls: ['./tooltip-card.component.scss'], animations: [ trigger('tooltip', [ - transition(':enter', [ - style({ opacity: 0 }), - animate(200, style({ opacity: 1 })) - ]), - transition(':leave', [ - animate(200, style({ opacity: 0 })) - - ]) + transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]), + transition(':leave', [animate(200, style({ opacity: 0 }))]) ]) ] }) @@ -42,7 +39,7 @@ export class TooltipCardComponent { @Input() htmlContent = ''; @Input() width = '300'; - constructor(private sanitizer: DomSanitizer) { } + constructor(private sanitizer: DomSanitizer) {} sanitizedHtmlContent(): string { return this.sanitizer.sanitize(SecurityContext.HTML, this.htmlContent); diff --git a/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts b/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts index 9d91419639..a7fc1798c9 100644 --- a/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts +++ b/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts @@ -27,7 +27,14 @@ import { TooltipCardComponent } from './tooltip-card.component'; const IMAGE_URL = 'alfresco-logo.svg'; @Component({ - template: `` + template: `` }) class TestComponent { @ViewChild(TooltipCardDirective, { static: true }) @@ -43,20 +50,12 @@ describe('TooltipCardDirective', () => { let overlayService: Overlay; let overlayContainer: OverlayContainer; - beforeEach((() => { + beforeEach(() => { TestBed.configureTestingModule({ - imports: [ - CommonModule, - OverlayModule, - NoopAnimationsModule - ], - declarations: [ - TooltipCardDirective, - TooltipCardComponent, - TestComponent - ] + imports: [CommonModule, OverlayModule, NoopAnimationsModule, TooltipCardDirective, TooltipCardComponent], + declarations: [TestComponent] }).compileComponents(); - })); + }); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); diff --git a/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts b/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts index 08acd51f71..b975344c45 100644 --- a/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts +++ b/lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts @@ -20,9 +20,11 @@ import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overla import { ComponentPortal } from '@angular/cdk/portal'; import { TooltipCardComponent } from './tooltip-card.component'; -@Directive({ selector: '[adf-tooltip-card]' }) +@Directive({ + selector: '[adf-tooltip-card]', + standalone: true +}) export class TooltipCardDirective implements OnInit, OnDestroy { - @Input('adf-tooltip-card') text = ''; @Input() image = ''; @Input() width = '300'; @@ -36,11 +38,7 @@ export class TooltipCardDirective implements OnInit, OnDestroy { private overlayRef: OverlayRef; - constructor( - private overlay: Overlay, - private overlayPositionBuilder: OverlayPositionBuilder, - private elementRef: ElementRef) { - } + constructor(private overlay: Overlay, private overlayPositionBuilder: OverlayPositionBuilder, private elementRef: ElementRef) {} ngOnDestroy(): void { if (this.overlayRef) { @@ -49,24 +47,23 @@ export class TooltipCardDirective implements OnInit, OnDestroy { } ngOnInit(): void { - const positionStrategy = this.overlayPositionBuilder - .flexibleConnectedTo(this.elementRef) - .withPositions([{ + const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([ + { originX: this.originX, originY: this.originY, overlayX: this.overlayX, overlayY: this.overlayY, offsetY: this.offsetY, offsetX: this.offsetX - }]); + } + ]); this.overlayRef = this.overlay.create({ positionStrategy }); } @HostListener('mouseenter') show() { - const tooltipRef: ComponentRef - = this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent)); + const tooltipRef: ComponentRef = this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent)); tooltipRef.instance.text = this.text; tooltipRef.instance.image = this.image; tooltipRef.instance.width = this.width; diff --git a/lib/core/src/lib/directives/upload.directive.ts b/lib/core/src/lib/directives/upload.directive.ts index a4cc8a9860..2dd41c9281 100644 --- a/lib/core/src/lib/directives/upload.directive.ts +++ b/lib/core/src/lib/directives/upload.directive.ts @@ -21,7 +21,8 @@ import { Directive, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit, import { FileInfo, FileUtils } from '../common/utils/file-utils'; @Directive({ - selector: '[adf-upload]' + selector: '[adf-upload]', + standalone: true }) export class UploadDirective implements OnInit, OnDestroy { /** Enables/disables uploading. */ diff --git a/lib/extensions/.eslintignore b/lib/extensions/.eslintignore new file mode 100644 index 0000000000..16523ff94f --- /dev/null +++ b/lib/extensions/.eslintignore @@ -0,0 +1,2 @@ +.storybook +coverage diff --git a/lib/insights/.eslintignore b/lib/insights/.eslintignore new file mode 100644 index 0000000000..16523ff94f --- /dev/null +++ b/lib/insights/.eslintignore @@ -0,0 +1,2 @@ +.storybook +coverage diff --git a/lib/js-api/.eslintignore b/lib/js-api/.eslintignore new file mode 100644 index 0000000000..e5b1dd5fc0 --- /dev/null +++ b/lib/js-api/.eslintignore @@ -0,0 +1,3 @@ +.storybook +coverage +docs diff --git a/lib/process-services-cloud/.eslintignore b/lib/process-services-cloud/.eslintignore index abb75b0d35..16523ff94f 100644 --- a/lib/process-services-cloud/.eslintignore +++ b/lib/process-services-cloud/.eslintignore @@ -1 +1,2 @@ .storybook +coverage diff --git a/lib/process-services/.eslintignore b/lib/process-services/.eslintignore new file mode 100644 index 0000000000..16523ff94f --- /dev/null +++ b/lib/process-services/.eslintignore @@ -0,0 +1,2 @@ +.storybook +coverage