feat(core): added new pipe CallPipe to call component methods are pure pipes

Example:
text | call: 'method'
text | call: method
text | call: method: 'additional': 'arguments'

Author: thekiba

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxf",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/platform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxf/platform",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "NGXF - Non-State Management for Angular",
   "keywords": [
     "non-ngxs",

projects/platform/src/lib/directives/index.ts

@@ -1,31 +1,3 @@
-import { AsyncDirective } from './async.directive';
-import { ComposeDirective } from './compose.directive';
-import { CookiesDirective } from './cookies.directive';
-import { HttpDirective } from './http.directive';
-import { LazyDirective } from './lazy.directive';
-import { InitDirective } from './init.directive';
-import { NestDirective } from './nest.directive';
-import { RenamePropDirective } from './rename-prop.directive';
-import { ReturnDirective } from './return.directive';
-import { RouteDirective } from './route.directive';
-import { SetPropsDirective } from './set-props.directive';
-import { TimeoutDirective } from './timeout.directive';
-
-export const DIRECTIVES = [
-  AsyncDirective,
-  ComposeDirective,
-  CookiesDirective,
-  HttpDirective,
-  LazyDirective,
-  InitDirective,
-  NestDirective,
-  RenamePropDirective,
-  ReturnDirective,
-  RouteDirective,
-  SetPropsDirective,
-  TimeoutDirective
-];
-
 export * from './async.directive';
 export * from './compose.directive';
 export * from './cookies.directive';

projects/platform/src/lib/pipes/call.pipe.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectorRef, EmbeddedViewRef, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'call' })
+export class CallPipe implements PipeTransform {
+  context: any;
+
+  constructor(cd: ChangeDetectorRef) {
+    this.context = (cd as EmbeddedViewRef<any>).context;
+  }
+
+  transform(param: any, fn: string | Function, ...params: any[]) {
+    if (typeof fn === 'string') {
+      fn = this.context[fn];
+    }
+
+    if (typeof fn !== 'function') {
+      fn = () => { };
+    }
+
+    return fn.apply(this.context, [param, ...params]);
+  }
+}

projects/platform/src/lib/pipes/index.ts

@@ -0,0 +1 @@
+export * from './call.pipe';

projects/platform/src/lib/platform.module.ts

@@ -1,5 +1,6 @@
 import { ANALYZE_FOR_ENTRY_COMPONENTS, ModuleWithProviders, NgModule, Type } from '@angular/core';
 import { AsyncDirective, ComposeDirective, CookiesDirective, HttpDirective, InitDirective, LAZY_COMPONENT_TOKEN, LazyDirective, NestDirective, RenamePropDirective, ReturnDirective, RouteDirective, SetPropsDirective, TimeoutDirective } from './directives';
+import { CallPipe } from './pipes';
 
 const DIRECTIVES = [
   AsyncDirective,
@@ -16,10 +17,14 @@ const DIRECTIVES = [
   TimeoutDirective
 ];
 
+const PIPES = [
+  CallPipe
+];
+
 @NgModule({
   imports: [],
-  declarations: [ DIRECTIVES ],
-  exports: [ DIRECTIVES ]
+  declarations: [ DIRECTIVES, PIPES ],
+  exports: [ DIRECTIVES, PIPES ]
 })
 export class NgxfModule {
   static forLazy(component: Type<any>): ModuleWithProviders {

projects/platform/src/test/pipes/call.pipe.spec.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import { fakeAsync } from '@angular/core/testing';
+import { createHostComponentFactory, SpectatorWithHost } from '@netbasal/spectator';
+import { CallPipe } from '../../lib/pipes';
+
+const TEXT = 'NGX Features Awesome';
+const TEXT2 = 'Really!';
+
+@Component({ selector: 'host', template: '' })
+class Host {
+  text: string = TEXT;
+  method(value: string) {
+    return this.transform(value);
+  }
+
+  transform(value: string) {
+    return value && value.toUpperCase();
+  }
+}
+
+describe('CallPipe', () => {
+  let host: SpectatorWithHost<Host, Host>;
+  const create = createHostComponentFactory({
+    host: Host,
+    component: Host,
+    declarations: [ CallPipe ]
+  });
+
+  it('should call component method at once', fakeAsync(() => {
+    host = create(`{{ text | call: 'method' }}`, false);
+    spyOn(host.hostComponent, 'method').and.callThrough();
+
+    host.detectChanges();
+    expect(host.hostElement).toHaveText(TEXT.toUpperCase());
+
+    host.detectChanges();
+    expect(host.hostComponent.method).toHaveBeenCalledTimes(1);
+  }));
+
+  it('should call component method after change text', fakeAsync(() => {
+    host = create(`{{ text | call: 'method' }}`, false);
+    spyOn(host.hostComponent, 'method').and.callThrough();
+
+    host.detectChanges();
+    expect(host.hostElement).toHaveText(TEXT.toUpperCase());
+
+    host.detectChanges();
+    expect(host.hostComponent.method).toHaveBeenCalledTimes(1);
+
+    host.setHostInput({ text: TEXT2 });
+    expect(host.hostElement).toHaveText(TEXT2.toUpperCase());
+
+    host.detectChanges();
+    expect(host.hostComponent.method).toHaveBeenCalledTimes(2);
+  }));
+
+  it('should call method by string', fakeAsync(() => {
+    host = create(`{{ text | call: 'method' }}`, false);
+    spyOn(host.hostComponent, 'method').and.callThrough();
+
+    host.detectChanges();
+    expect(host.hostComponent.method).toHaveBeenCalledTimes(1);
+  }));
+
+  it('should call method by function', fakeAsync(() => {
+    host = create(`{{ text | call: method }}`, false);
+    spyOn(host.hostComponent, 'method').and.callThrough();
+
+    host.detectChanges();
+    expect(host.hostComponent.method).toHaveBeenCalledTimes(1);
+  }));
+
+  it('should call method with extra arguments', fakeAsync(() => {
+    host = create(`{{ text | call: method: 'foo': 'bar' }}`, false);
+    spyOn(host.hostComponent, 'method').and.callThrough();
+
+    host.detectChanges();
+    expect(host.hostComponent.method).toHaveBeenCalledWith(TEXT, 'foo', 'bar');
+  }));
+
+});