feat(core): added new react hook *useEffect

Example:
effect() {
  console.log('lol');
  return () =>
    console.log(`I'm died!`);
}

<ng-container *useEffect="effect; on [x]">
  Hello  world!
</ng-container>

Author: thekiba

projects/platform/package.json

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

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

@@ -12,3 +12,4 @@ export * from './set-props.directive';
 export * from './timeout.directive';
 export * from './use-reducer.directive';
 export * from './use-state.directive';
+export * from './use-effect.directive';

projects/platform/src/lib/directives/use-effect.directive.ts

@@ -0,0 +1,84 @@
+import {
+  Directive,
+  DoCheck,
+  EmbeddedViewRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  TemplateRef,
+  ViewContainerRef
+} from '@angular/core';
+
+@Directive({
+  selector: '[useEffect]'
+})
+export class UseEffectDirective implements OnChanges, DoCheck, OnDestroy {
+  private context: {} = {};
+
+  @Input() useEffect: Function;
+  @Input() useEffectOn: [];
+
+  private onDestroyCallback: Function;
+
+  private viewRef: EmbeddedViewRef<{}>;
+
+  constructor(
+    private templateRef: TemplateRef<{}>,
+    private vcr: ViewContainerRef
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.useEffect && this.useEffect) {
+      this.destroy();
+      this.init();
+    } else if (changes.useEffectOn) {
+      if (Array.isArray(this.useEffectOn)) {
+        const previous = changes.useEffectOn.previousValue || [];
+        const current = changes.useEffectOn.currentValue || [];
+
+        const isChanged = !previous.every((item, index) => current[index] === item);
+
+        if (isChanged) {
+          this.destroy();
+          this.init();
+        }
+      } else {
+        this.destroy();
+        this.init();
+      }
+    }
+  }
+
+  ngDoCheck() {
+    if (!Array.isArray(this.useEffectOn)) {
+      this.destroy();
+      this.init();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy();
+  }
+
+  private init() {
+    this.viewRef = this.vcr.createEmbeddedView(this.templateRef, this.context);
+    if (this.useEffect) {
+      this.onDestroyCallback = this.useEffect();
+    }
+  }
+
+  private destroy() {
+    if (this.onDestroyCallback) {
+      this.onDestroyCallback();
+      this.onDestroyCallback = null;
+    }
+
+    this.vcr.clear();
+
+    if (this.viewRef) {
+      this.viewRef.destroy();
+      this.viewRef = null;
+    }
+  }
+}

projects/platform/src/lib/directives/use-state.directive.ts

@@ -12,31 +12,31 @@ interface UseStateContext<T = any> {
   selector: '[useState]'
 })
 export class UseStateDirective implements OnChanges, OnDestroy {
-  @Input() useStateOf: any;
+  @Input() useStateDefault: any;
 
-  private context: UseStateContext = {
-    $implicit: {
-      get: this.useStateOf,
-      set(value: any) {
-        this.get = value;
-        this.detectChanges();
-      },
-      detectChanges: () => {
-        this.embeddedViewRef.detectChanges();
-      }
-    }
-  };
-  private embeddedViewRef: EmbeddedViewRef<UseStateContext> =
-    this.vcr.createEmbeddedView(this.templateRef, this.context);
+  private context: UseStateContext = {} as any;
+  private embeddedViewRef: EmbeddedViewRef<UseStateContext>;
+  private value: any;
 
   constructor(
     private templateRef: TemplateRef<UseStateContext>,
     private vcr: ViewContainerRef
-  ) {}
+  ) {
+    Object.defineProperty(this.context, '$implicit', {
+      get: () => this.value,
+      set: (value) => {
+        this.value = value;
+        if (this.embeddedViewRef) {
+          this.embeddedViewRef.detectChanges();
+        }
+      }
+    });
+    this.embeddedViewRef = this.vcr.createEmbeddedView(this.templateRef, this.context);
+  }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.useStateOf) {
-      this.context.$implicit.get = this.useStateOf;
+    if (changes.useStateDefault) {
+      this.value = this.useStateDefault;
     }
   }
 

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

@@ -13,6 +13,7 @@ import {
   RouteDirective,
   SetPropsDirective,
   TimeoutDirective,
+  UseEffectDirective,
   UseReducerDirective,
   UseStateDirective
 } from './directives';
@@ -32,7 +33,8 @@ const DIRECTIVES = [
   SetPropsDirective,
   TimeoutDirective,
   UseReducerDirective,
-  UseStateDirective
+  UseStateDirective,
+  UseEffectDirective
 ];
 
 const PIPES = [

projects/platform/src/test/directives/use-effect.directive.spec.ts

@@ -0,0 +1,78 @@
+import { Component } from '@angular/core';
+import { createHostComponentFactory, SpectatorWithHost } from '@netbasal/spectator';
+import { UseEffectDirective } from '../../lib/directives';
+
+@Component({ selector: 'host', template: '' })
+class Host {
+  a;
+  x;
+
+  effect = () => {
+    return () => this.destroy();
+  }
+
+  destroy() {}
+}
+
+describe('UseEffectDirective', () => {
+  let host: SpectatorWithHost<UseEffectDirective, Host>;
+  const create = createHostComponentFactory({
+    component: UseEffectDirective,
+    host: Host
+  });
+
+  it('should recreate effect when x changed', () => {
+    host = create(`
+      <ng-container *useEffect="effect; on [x]">
+        Hello world!
+      </ng-container>
+    `);
+
+    spyOn(host.hostComponent, 'effect').and.callThrough();
+    spyOn(host.hostComponent, 'destroy').and.callThrough();
+
+    host.setHostInput({ a: 'a' });
+    host.setHostInput({ x: 'a' });
+    host.setHostInput({ a: 'v' });
+
+    expect(host.hostComponent.effect).toHaveBeenCalledTimes(2);
+    expect(host.hostComponent.destroy).toHaveBeenCalledTimes(2);
+  });
+
+  it('shouldn recreate effect when any param changed', () => {
+    host = create(`
+      <ng-container *useEffect="effect; on []">
+        Hello world!
+      </ng-container>
+    `);
+
+    spyOn(host.hostComponent, 'effect').and.callThrough();
+    spyOn(host.hostComponent, 'destroy').and.callThrough();
+
+    host.setHostInput({ a: 'a' });
+    host.setHostInput({ x: 'a' });
+    host.setHostInput({ a: 'v' });
+
+    expect(host.hostComponent.effect).toHaveBeenCalledTimes(1);
+    expect(host.hostComponent.destroy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should recreate effect when any param changed', () => {
+    host = create(`
+      <ng-container *useEffect="effect">
+        Hello world!
+      </ng-container>
+    `);
+
+    spyOn(host.hostComponent, 'effect').and.callThrough();
+    spyOn(host.hostComponent, 'destroy').and.callThrough();
+
+    host.setHostInput({ a: 'a' });
+    host.setHostInput({ x: 'a' });
+    host.setHostInput({ a: 'v' });
+
+    expect(host.hostComponent.effect).toHaveBeenCalledTimes(4);
+    expect(host.hostComponent.destroy).toHaveBeenCalledTimes(4);
+  });
+
+});

projects/platform/src/test/directives/use-state.directive.spec.ts

@@ -14,9 +14,9 @@ describe('UseStateDirective', () => {
 
   it('should create state through template', () => {
     host = create(`
-      <ng-container *useState="let x of 0">
-        Count: {{ x.get }}
-        <button id="increment" (click)="x.set(x.get + 1)">Increment</button>
+      <ng-container *useState="let x default 0">
+        Count: {{ x }}
+        <button id="increment" (click)="x = x + 1">Increment</button>
       </ng-container>
     `);
 

projects/socketio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxf/socket.io",
-  "version": "6.0.7",
+  "version": "6.0.8",
   "description": "NGXF - Non-State Management for Angular",
   "keywords": [
     "non-ngxs",