feat(module): add module for clearer addition (Tinkoff#22)

* feat(module): add module for clearer addition

* chore: tests

Author: waterplea

README.md

@@ -13,27 +13,31 @@ _preventDefault()_ and _stopPropagation()_.
 
 ## How to use
 
-1. Add new providers to your app module:
+1. Add `EventPluginsModule` to your app module:
 
     ```typescript
     import {NgModule} from '@angular/core';
-    import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; // <-- THIS
+    import {BrowserModule} from '@angular/platform-browser';
+    import {EventPluginsModule} from '@tinkoff/ng-event-plugins'; // <-- THIS
 
     @NgModule({
         bootstrap: [
             /*...*/
         ],
         imports: [
             /*...*/
+            BrowserModule,
+            EventPluginsModule, // <-- GOES HERE
         ],
         declarations: [
             /*...*/
         ],
-        providers: NG_EVENT_PLUGINS, // <-- GOES HERE
     })
     export class AppModule {}
     ```
 
+> `BrowserModule` or `BrowserAnimationsModule` must go first. You will see a warning if you mess the order.
+
 2. Use new modifiers for events in templates and in `@HostListener`:
 
     - `.stop` to call stopPropagation() on event

projects/demo/src/app/app.browser.module.ts

@@ -1,7 +1,7 @@
 import {APP_BASE_HREF, LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins';
+import {EventPluginsModule} from '@tinkoff/ng-event-plugins';
 import {HIGHLIGHT_OPTIONS, HighlightModule} from 'ngx-highlightjs';
 import {AppComponent} from './app.component';
 import {AppRoutingModule} from './app.routes';
@@ -11,6 +11,7 @@ import {StaticModule} from './modules/static/static.module';
     bootstrap: [AppComponent],
     imports: [
         BrowserModule.withServerTransition({appId: 'demo'}),
+        EventPluginsModule,
         AppRoutingModule,
         StaticModule,
         HighlightModule,
@@ -37,7 +38,6 @@ import {StaticModule} from './modules/static/static.module';
                 },
             },
         },
-        NG_EVENT_PLUGINS,
     ],
 })
 export class AppBrowserModule {}

projects/ng-event-plugins/src/module.ts

@@ -0,0 +1,17 @@
+import {Inject, NgModule} from '@angular/core';
+import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
+import {NG_EVENT_PLUGINS} from './constants/plugins';
+import {SilentEventPlugin} from './plugins/silent.plugin';
+
+// @dynamic
+@NgModule({
+    providers: NG_EVENT_PLUGINS,
+})
+export class EventPluginsModule {
+    constructor(@Inject(EVENT_MANAGER_PLUGINS) plugins: readonly unknown[]) {
+        console.assert(
+            !(plugins[0] instanceof SilentEventPlugin),
+            'EventManagerModule must come after BrowserModule in imports',
+        );
+    }
+}

projects/ng-event-plugins/src/public-api.ts

@@ -11,3 +11,4 @@ export * from './plugins/stop.plugin';
 export * from './plugins/zone.plugin';
 export * from './types/predicate';
 export * from './utils/as-callable';
+export * from './module';

projects/ng-event-plugins/src/test/test.spec.ts

@@ -9,8 +9,8 @@ import {
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BehaviorSubject} from 'rxjs';
-import {NG_EVENT_PLUGINS} from '../constants/plugins';
 import {shouldCall} from '../decorators/should-call';
+import {EventPluginsModule} from '../module';
 import {asCallable} from '../utils/as-callable';
 
 describe('EventManagers', () => {
@@ -33,11 +33,11 @@ describe('EventManagers', () => {
                     (click.silent)="onFilteredClicks($event.bubbles)"
                 ></div>
             </div>
-            <div class="wrapper" (click.capture.stop)="noop()">
+            <div class="wrapper" (click.capture.stop)="(0)">
                 <div id="captured-clicks" class="element" (click)="onCaptured()"></div>
             </div>
             <div class="wrapper" (click.self)="onBubbled()">
-                <div id="bubbled-clicks" class="element" (click)="noop()"></div>
+                <div id="bubbled-clicks" class="element" (click)="(0)"></div>
             </div>
         `,
         changeDetection: ChangeDetectionStrategy.OnPush,
@@ -54,8 +54,8 @@ describe('EventManagers', () => {
         @HostListener('$.data-value.attr')
         @HostBinding('$.tabIndex')
         @HostListener('$.tabIndex')
-        @HostBinding('$.style.width.%')
-        @HostListener('$.style.width.%')
+        @HostBinding('$.style.marginTop.%')
+        @HostListener('$.style.marginTop.%')
         @HostBinding('$.class.active')
         @HostListener('$.class.active')
         readonly test = asCallable(new BehaviorSubject<number | null>(1));
@@ -69,25 +69,21 @@ describe('EventManagers', () => {
         onFilteredClicks(_bubbles: boolean) {
             this.flag = true;
         }
-
-        noop() {}
     }
 
     @Component({
-        template: `<div (document:click.capture)="noop()"></div>`,
+        template: `<div (document:click.capture)="(0)"></div>`,
         changeDetection: ChangeDetectionStrategy.OnPush,
     })
-    class BrokenComponent {
-        noop() {}
-    }
+    class BrokenComponent {}
 
     let fixture: ComponentFixture<TestComponent>;
     let testComponent: TestComponent;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [EventPluginsModule],
             declarations: [TestComponent, BrokenComponent],
-            providers: NG_EVENT_PLUGINS,
         });
 
         fixture = TestBed.createComponent(TestComponent);
@@ -195,7 +191,7 @@ describe('EventManagers', () => {
             '1',
         );
         expect(testComponent.elementRef.nativeElement.tabIndex).toBe(1);
-        expect(testComponent.elementRef.nativeElement.style.width).toBe('1%');
+        expect(testComponent.elementRef.nativeElement.style.marginTop).toBe('1%');
         expect(testComponent.elementRef.nativeElement.classList.contains('active')).toBe(
             true,
         );
@@ -208,7 +204,7 @@ describe('EventManagers', () => {
             null,
         );
         expect(testComponent.elementRef.nativeElement.tabIndex).toBe(0);
-        expect(testComponent.elementRef.nativeElement.style.width).toBe('1%');
+        expect(testComponent.elementRef.nativeElement.style.marginTop).toBe('1%');
         expect(testComponent.elementRef.nativeElement.classList.contains('active')).toBe(
             false,
         );