feat(ngx-utils): ngx-utils module replace ngx-pipes

apps/webapp/src/styles/fu/_var.scss

@@ -54,7 +54,8 @@ $config: mat-typography-config(
   $body-1: mat-typography-level(14px, 22px, 400),
   $caption: mat-typography-level(13px, 22px, 400),
   $button: mat-typography-level(14px, 14px, 500),
-  // Line-height must be unit-less fraction of the font-size. $input: mat-typography-level(16px, 1.125, 400),
+  // Line-height must be unit-less fraction of the font-size.
+  $input: mat-typography-level(16px, 1.125, 400)
 );
 
 /**
@@ -184,9 +185,7 @@ $sidenav-item-padding-left-level5: $sidenav-item-padding-left-level4 + 8px;
 $sidenav-item-padding-left-level6: $sidenav-item-padding-left-level5 + 8px;
 
 $sidenav-width: 270px; // If you change this, you also need to adjust the animations in sidenav.component.ts
-$sidenav-collapsed-width: (
-  $sidenav-item-padding-left + $sidenav-item-padding-right + $sidenav-item-icon-font-size
-); // If you change this, you also need to adjust the animations in sidenav.component.ts
+$sidenav-collapsed-width: ($sidenav-item-padding-left + $sidenav-item-padding-right + $sidenav-item-icon-font-size); // If you change this, you also need to adjust the animations in sidenav.component.ts
 $sidenav-z-index: 1000;
 
 /**

libs/core/src/lib/state/custom-router-state.serializer.ts

@@ -0,0 +1,25 @@
+import { Params, RouterStateSnapshot } from '@angular/router';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsRouterPluginModule, RouterStateSerializer } from '@ngxs/router-plugin';
+
+export interface RouterStateParams {
+  url: string;
+  params: Params;
+  queryParams: Params;
+}
+
+// Map the router snapshot to { url, params, queryParams }
+export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateParams> {
+  serialize(routerState: RouterStateSnapshot): RouterStateParams {
+    const {
+      url,
+      root: { queryParams },
+    } = routerState;
+    let { root: route } = routerState;
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+    const { params } = route;
+    return { url, params, queryParams };
+  }
+}

libs/ngx-utils/README.md

@@ -0,0 +1,4 @@
+ngx-utils
+=========
+
+same as `@ngrx-utils/store` without dependency on `@ngrx/store`

libs/ngx-utils/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  name: 'ngx-utils',
+  preset: '../../jest.config.js',
+  coverageDirectory: '../../coverage/libs/ngx-utils'
+};

libs/ngx-pipes/ng-package.prod.json → libs/ngx-utils/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/ngx-pipes",
+  "dest": "../../dist/libs/ngx-utils",
   "lib": {
     "entryFile": "src/index.ts"
   }

libs/ngx-utils/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "ngx-utils",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^7.0.0",
+    "@angular/core": "^7.0.0"
+  }
+}

libs/ngx-utils/src/index.ts

@@ -0,0 +1,4 @@
+// export * from './lib/decorators/index';
+export * from './lib/directives/index';
+export * from './lib/operators/index';
+export * from './lib/pipes/index';

libs/ngx-utils/src/lib/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './ng-let/ng-let.module';
+export * from './router-link-match/router-link-match.module';

libs/ngx-utils/src/lib/directives/ng-let/ng-let.directive.spec.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common';
+import { Component, NgModule, ViewChild } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Observable, of } from 'rxjs';
+import { NgLetDirective } from './ng-let.directive';
+import { NgLetModule } from './ng-let.module';
+
+@Component({
+  template: '',
+  selector: 'sand-test'
+})
+class TestComponent {
+  @ViewChild(NgLetDirective) ngLetDirective: NgLetDirective;
+  test$: Observable<number>;
+  test = 10;
+  nestedTest = 20;
+  functionTest = (a: number, b: number) => a + b;
+}
+
+@NgModule({
+  declarations: [TestComponent],
+  imports: [NgLetModule, CommonModule],
+  exports: [NgLetModule, TestComponent]
+})
+class TestModule {}
+
+describe('ngLet directive', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  function getComponent(): TestComponent {
+    return fixture.componentInstance;
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestModule]
+    });
+  });
+
+  afterEach(() => {
+    fixture = null!;
+  });
+
+  it('should create NgLetModule', () => {
+    expect(new NgLetModule()).toBeTruthy();
+  });
+
+  it('should work in a template attribute', async(() => {
+    const template = '<span *ngLet="test as i">hello{{ i }}</span>';
+    fixture = createTestComponent(template);
+    getComponent().test = 7;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+    expect(fixture.nativeElement.textContent).toBe('hello7');
+  }));
+
+  it('should work on a template element', async(() => {
+    const template = '<ng-template [ngLet]="test" let-i>hello{{ i }}</ng-template>';
+    fixture = createTestComponent(template);
+    getComponent().test = 5;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe('hello5');
+  }));
+
+  it('should handle nested ngLet correctly', async(() => {
+    const template =
+      '<div *ngLet="test as i"><span *ngLet="nestedTest as k">hello{{ i + k }}</span></div>';
+
+    fixture = createTestComponent(template);
+
+    getComponent().test = 3;
+    getComponent().nestedTest = 5;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+    expect(fixture.nativeElement.textContent).toBe('hello8');
+  }));
+
+  it('should update several nodes', async(() => {
+    const template =
+      '<span *ngLet="test + 1; let i">helloNumber{{ i }}</span>' +
+      '<span *ngLet="functionTest(5, 8) as j">helloFunction{{ j }}</span>';
+
+    fixture = createTestComponent(template);
+
+    getComponent().test = 4;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(2);
+    expect(fixture.nativeElement.textContent).toContain('helloNumber5helloFunction13');
+  }));
+
+  it('should work on async pipe', async(() => {
+    const template = '<span *ngLet="test$ | async as t">helloAsync{{ t }}</span>';
+
+    fixture = createTestComponent(template);
+
+    getComponent().test$ = of(15);
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+    expect(fixture.nativeElement.textContent).toContain('helloAsync15');
+  }));
+
+  it('should accept input', async(() => {
+    const template = '<span *ngLet="test as i">hello{{ i }}</span>';
+
+    fixture = createTestComponent(template);
+    fixture.detectChanges();
+
+    expect(getComponent().ngLetDirective).toBeTruthy();
+    getComponent().ngLetDirective.ngLet = 21;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('hello21');
+  }));
+});
+
+function createTestComponent(template: string): ComponentFixture<TestComponent> {
+  return TestBed.overrideComponent(TestComponent, { set: { template } }).createComponent(
+    TestComponent
+  );
+}

libs/shared/src/lib/directives/ng-let.directive.ts → libs/ngx-utils/src/lib/directives/ng-let/ng-let.directive.ts

@@ -1,4 +1,4 @@
-import { NgModule, Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { NgModule, Directive, Input, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
 
 export class NgLetContext {
   $implicit: any = null;
@@ -8,15 +8,17 @@ export class NgLetContext {
 @Directive({
   selector: '[ngLet]',
 })
-export class NgLetDirective {
+export class NgLetDirective implements OnInit {
   private _context = new NgLetContext();
 
   @Input()
   set ngLet(value: any) {
     this._context.$implicit = this._context.ngLet = value;
   }
 
-  constructor(_vcr: ViewContainerRef, _templateRef: TemplateRef<NgLetContext>) {
-    _vcr.createEmbeddedView(_templateRef, this._context);
+  constructor(private _vcr: ViewContainerRef, private _templateRef: TemplateRef<NgLetContext>) {}
+
+  ngOnInit() {
+    this._vcr.createEmbeddedView(this._templateRef, this._context);
   }
 }

libs/ngx-utils/src/lib/directives/ng-let/ng-let.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgLetDirective } from './ng-let.directive';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [NgLetDirective],
+  exports: [NgLetDirective]
+})
+export class NgLetModule { }