Merge pull request #2 from TinkoffCreditSystems/plugins

rename library

.github/CODEOWNERS

@@ -1,10 +1,10 @@
 # ==================================================================================
 # ==================================================================================
-#                            @tinkoff/ng-event-filters codeowners
+#                            @tinkoff/ng-event-plugins codeowners
 # ==================================================================================
 # ==================================================================================
 #
-#  Configuration of code ownership and review approvals for the @tinkoff/ng-event-filters repo.
+#  Configuration of code ownership and review approvals for the @tinkoff/ng-event-plugins repo.
 #
 #  More info: https://help.github.com/articles/about-codeowners/
 #

README.md

@@ -1,12 +1,12 @@
 # Angular Event Filters
 
-[![npm version](https://img.shields.io/npm/v/@tinkoff/ng-event-filters.svg)](https://npmjs.com/package/@tinkoff/ng-event-filters)
-[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@tinkoff/ng-event-filters)](https://bundlephobia.com/result?p=@tinkoff/ng-event-filters)
-[![Build Status](https://travis-ci.com/TinkoffCreditSystems/ng-event-filters.svg?branch=master)](https://travis-ci.com/TinkoffCreditSystems/ng-event-filters)
-[![Coverage Status](https://coveralls.io/repos/github/TinkoffCreditSystems/ng-event-filters/badge.svg?branch=master)](https://coveralls.io/github/TinkoffCreditSystems/ng-event-filters?branch=master)
+[![npm version](https://img.shields.io/npm/v/@tinkoff/ng-event-plugins.svg)](https://npmjs.com/package/@tinkoff/ng-event-plugins)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@tinkoff/ng-event-plugins)](https://bundlephobia.com/result?p=@tinkoff/ng-event-plugins)
+[![Build Status](https://travis-ci.com/TinkoffCreditSystems/ng-event-plugins.svg?branch=master)](https://travis-ci.com/TinkoffCreditSystems/ng-event-plugins)
+[![Coverage Status](https://coveralls.io/repos/github/TinkoffCreditSystems/ng-event-plugins/badge.svg?branch=master)](https://coveralls.io/github/TinkoffCreditSystems/ng-event-plugins?branch=master)
 [![angular-open-source-starter](https://img.shields.io/badge/made%20with-angular--open--source--starter-d81676?logo=angular)](https://github.com/TinkoffCreditSystems/angular-open-source-starter)
 
-**@tinkoff/ng-event-filters** is a tiny (1KB gzip) library for
+**@tinkoff/ng-event-plugins** is a tiny (1KB gzip) library for
 optimizing change detection cycles for performance sensitive events
 (such as _touchmove_, _scroll_, _drag_ etc.) and declarative
 _preventDefault()_ and _stopPropagation()_.
@@ -17,7 +17,7 @@ _preventDefault()_ and _stopPropagation()_.
 
     ```typescript
     import {NgModule} from '@angular/core';
-    import {PLUGINS} from '@tinkoff/ng-event-filters'; // <-- THIS
+    import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; // <-- THIS
 
     @NgModule({
         bootstrap: [
@@ -29,7 +29,7 @@ _preventDefault()_ and _stopPropagation()_.
         declarations: [
             /*...*/
         ],
-        providers: [...PLUGINS], // <-- GOES HERE
+        providers: NG_EVENT_PLUGINS, // <-- GOES HERE
     })
     export class AppModule {}
     ```
@@ -60,7 +60,8 @@ _preventDefault()_ and _stopPropagation()_.
     </div>
     ```
 
-3. You can also re-enter `NgZone` and trigger change detection, using `@filter` decorator:
+3. You can also re-enter `NgZone` and trigger change detection, using `@shouldCall` decorator
+   that takes a predicate function as argument:
 
 ```html
 <div (scroll.silent)="onScroll($event.currentTarget)">
@@ -70,29 +71,31 @@ _preventDefault()_ and _stopPropagation()_.
 ```
 
 ```typescript
-import {filter} from '@tinkoff/ng-event-filters';
+import {shouldCall} from '@tinkoff/ng-event-plugins';
 
 export function scrollFilter(element: HTMLElement): boolean {
     return element.scrollTop === element.scrollHeight - element.clientHeight;
 }
 
 // ...
 
-@filter(scrollFilter)
+@shouldCall(scrollFilter)
 onScroll(_element: HTMLElement) {
     this.someService.requestMoreData();
 }
 ```
 
-> **All examples above work the same when used with `@HostListener`.**
+> **All examples above work the same when used with `@HostListener` and `CustomEvent`**
 
 ## Important notes
 
--   Filter function will be called with the same arguments as the
-    decorated method. Decorated method will be called and change detection
-    triggered if filter function returns `true`.
+-   Predicate is called with the same arguments as the decorated method and
+    in the context of class instance (has access to `this`)
 
--   Filter function must be exported named function for AOT, arrow
+-   Decorated method will be called and change detection triggered if predicate
+    returns `true`.
+
+-   Predicates must be exported named function for AOT, arrow
     functions will trigger build error.
 
 -   `.silent` modifier will not work with built-in keyboard pseudo-events,
@@ -101,7 +104,7 @@ onScroll(_element: HTMLElement) {
 
 ## Demo
 
-You can try this [interactive demo](https://codesandbox.io/s/github/TinkoffCreditSystems/ng-event-filters/tree/master/projects/demo)
+You can try this [interactive demo](https://codesandbox.io/s/github/TinkoffCreditSystems/ng-event-plugins/tree/master/projects/demo)
 
 ## Open-source
 

angular.json

@@ -77,24 +77,24 @@
                 }
             }
         },
-        "ng-event-filters": {
+        "ng-event-plugins": {
             "projectType": "library",
-            "root": "projects/ng-event-filters",
-            "sourceRoot": "projects/ng-event-filters/src",
+            "root": "projects/ng-event-plugins",
+            "sourceRoot": "projects/ng-event-plugins/src",
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-ng-packagr:build",
                     "options": {
-                        "tsConfig": "projects/ng-event-filters/tsconfig.lib.json",
-                        "project": "projects/ng-event-filters/ng-package.json"
+                        "tsConfig": "projects/ng-event-plugins/tsconfig.lib.json",
+                        "project": "projects/ng-event-plugins/ng-package.json"
                     }
                 },
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
-                        "main": "projects/ng-event-filters/src/test.ts",
-                        "tsConfig": "projects/ng-event-filters/tsconfig.spec.json",
-                        "karmaConfig": "projects/ng-event-filters/karma.conf.js",
+                        "main": "projects/ng-event-plugins/src/test.ts",
+                        "tsConfig": "projects/ng-event-plugins/tsconfig.spec.json",
+                        "karmaConfig": "projects/ng-event-plugins/karma.conf.js",
                         "codeCoverage": true,
                         "browsers": "ChromeHeadless"
                     }
@@ -103,14 +103,14 @@
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": [
-                            "projects/ng-event-filters/tsconfig.lib.json",
-                            "projects/ng-event-filters/tsconfig.spec.json"
+                            "projects/ng-event-plugins/tsconfig.lib.json",
+                            "projects/ng-event-plugins/tsconfig.spec.json"
                         ],
                         "exclude": ["**/node_modules/**"]
                     }
                 }
             }
         }
     },
-    "defaultProject": "ng-event-filters"
+    "defaultProject": "ng-event-plugins"
 }

package.json

@@ -1,12 +1,13 @@
 {
-    "name": "@tinkoff/ng-event-filters",
+    "name": "@tinkoff/ng-event-plugins",
     "version": "1.0.0",
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
         "start:ssr": "npm run build:demo:ssr && npm run serve:ssr",
         "start:prerender": "npm run build:demo:prerender && npm run serve:prerender",
         "build": "ng build",
+        "postbuild": "node scripts/postbuild.js",
         "build:demo:client": "ng run demo:build",
         "build:demo:server": "ng run demo:server",
         "build:demo:ssr": "npm run build:demo:client && npm run build:demo:server && npm run compile:server",
@@ -23,7 +24,7 @@
         "release:patch": "npm run release -- --release-as patch",
         "release:minor": "npm run release -- --release-as minor",
         "release:major": "npm run release -- --release-as major",
-        "publish": "npm run build && npm publish ./dist/ng-event-filters"
+        "publish": "npm run build && npm publish ./dist/ng-event-plugins"
     },
     "description": "This is a library for optimizing performance sensitive events and declarative preventDefault and stopPropagation",
     "keywords": [
@@ -43,9 +44,9 @@
     ],
     "license": "Apache-2.0",
     "authors": ["Alex Inkin <a.inkin@tinkoff.ru>", "Roman Sedov <r.sedov@tinkoff.ru>"],
-    "repository": "https://github.com/TinkoffCreditSystems/ng-event-filters",
-    "bugs": "https://github.com/TinkoffCreditSystems/ng-event-filters/issues",
-    "homepage": "https://github.com/TinkoffCreditSystems/ng-event-filters#README",
+    "repository": "https://github.com/TinkoffCreditSystems/ng-event-plugins",
+    "bugs": "https://github.com/TinkoffCreditSystems/ng-event-plugins/issues",
+    "homepage": "https://github.com/TinkoffCreditSystems/ng-event-plugins#README",
     "dependencies": {
         "@angular/animations": "^7.2.15",
         "@angular/common": "^7.2.15",

projects/demo/package.json

@@ -15,7 +15,7 @@
         "@angular/platform-browser": "^8.2.4",
         "@angular/platform-browser-dynamic": "8.2.0",
         "@angular/router": "8.2.0",
-        "@tinkoff/ng-event-filters": "latest",
+        "@tinkoff/ng-event-plugins": "latest",
         "core-js": "2.6.9",
         "highlight.js": "^9.15.5",
         "ngx-highlightjs": "3.0.3",

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

@@ -5,7 +5,7 @@ import * as xml from 'highlight.js/lib/languages/xml';
 import {APP_BASE_HREF, LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {PLUGINS} from '@tinkoff/ng-event-filters';
+import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins';
 import {HighlightLanguage, HighlightModule} from 'ngx-highlightjs';
 import {AppComponent} from './app.component';
 import {AppRoutingModule} from './app.routes';
@@ -39,7 +39,7 @@ export function hljsLanguages(): ReadonlyArray<HighlightLanguage> {
             provide: APP_BASE_HREF,
             useValue: '',
         },
-        ...PLUGINS,
+        NG_EVENT_PLUGINS,
     ],
 })
 export class AppBrowserModule {}

projects/demo/src/app/modules/select/select.component.ts

@@ -11,7 +11,7 @@ import {
     ViewChild,
     ViewChildren,
 } from '@angular/core';
-import {filter} from '@tinkoff/ng-event-filters';
+import {shouldCall} from '@tinkoff/ng-event-plugins';
 
 @Component({
     selector: 'custom-select',
@@ -45,7 +45,7 @@ export class SelectComponent {
     }
 
     // Only react to Esc if dropdown is open
-    @filter((_, open) => open)
+    @shouldCall((_, open) => open)
     @HostListener('keydown.esc.silent', ['$event', 'open'])
     onEsc(event: KeyboardEvent) {
         event.stopPropagation();
@@ -54,28 +54,28 @@ export class SelectComponent {
     }
 
     // Only react to focusout if focus leaves component boundaries
-    @filter((relatedTarget, nativeElement) => !nativeElement.contains(relatedTarget))
+    @shouldCall((relatedTarget, nativeElement) => !nativeElement.contains(relatedTarget))
     @HostListener('focusout.silent', ['$event.relatedTarget', 'elementRef.nativeElement'])
     onBlur() {
         this.open = false;
     }
 
     // Only react to mousemove if focus is required
-    @filter(element => element !== document.activeElement)
+    @shouldCall(element => element !== document.activeElement)
     onMouseMove(element: HTMLElement) {
         element.focus();
     }
 
     // Only react to arrow down if we are not on the last item
-    @filter((currentIndex, length) => currentIndex < length - 1)
+    @shouldCall((currentIndex, length) => currentIndex < length - 1)
     onArrowDown(currentIndex: number) {
         this.options
             .find((_item, index) => index === currentIndex + 1)!
             .nativeElement.focus();
     }
 
     // Only react to arrow up if we are not on the first item
-    @filter(currentIndex => !!currentIndex)
+    @shouldCall(currentIndex => !!currentIndex)
     onArrowUp(currentIndex: number) {
         this.options
             .find((_item, index) => index === currentIndex - 1)!

projects/demo/src/app/modules/static/static.template.html

@@ -12,10 +12,10 @@ <h2>Example</h2>
         <code>mousemove</code> event is unnecessary, because when item is already focused,
         you do not need to do anything and there is no need to trigger change detection.
     </p>
-    <code>@tinkoff/ng-event-filters</code> allows you to skip events using
-    <code>.silent</code> event modifier and <code>@filter</code> decorator. It also adds
-    <code>.stop</code> and <code>.prevent</code> event modifiers to prevent default and
-    stop propagation in declarative fashion.
+    <code>@tinkoff/ng-event-plugins</code> allows you to skip events using
+    <code>.silent</code> event modifier and <code>@shouldCall</code> decorator. It also
+    adds <code>.stop</code> and <code>.prevent</code> event modifiers to prevent default
+    and stop propagation in declarative fashion.
 </blockquote>
 <h2>HTML and TypeScript source code for Select component</h2>
 <pre><code [highlight]="html"></code></pre>
@@ -32,6 +32,6 @@ <h1>Popup</h1>
         Select — Esc button should only close the dropdown. This can be achieved by
         stopping event propagation. But if the dropdown is already closed, Select should
         not handle Esc keydown event. This can be achieved using
-        <code>@filter</code> decorator.
+        <code>@shouldCall</code> decorator.
     </blockquote>
 </popup>