feat(core): implement *isDevMode directive, will render view when isDevMode() will returns true (#6)

Author: thekiba

projects/platform/src/lib/directives/is-dev-mode.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, EmbeddedViewRef, OnDestroy, TemplateRef, ViewContainerRef, isDevMode, Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class DevModeService {
+  constructor() {}
+
+  isDevMode() {
+    return isDevMode();
+  }
+}
+
+@Directive({
+  selector: '[isDevMode]'
+})
+export class IsDevModeDirective implements OnDestroy {
+  private viewRef: EmbeddedViewRef<null>;
+
+  constructor(
+    devModeService: DevModeService,
+    viewContainerRef: ViewContainerRef,
+    templateRef: TemplateRef<null>
+  ) {
+    if (devModeService.isDevMode()) {
+      viewContainerRef.createEmbeddedView(templateRef);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.viewRef) {
+      this.viewRef.destroy();
+      this.viewRef = null;
+    }
+  }
+}

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

@@ -5,6 +5,7 @@ import { ComposeDirective } from './directives/compose.directive';
 import { CookiesDirective } from './directives/cookies.directive';
 import { HttpDirective } from './directives/http.directive';
 import { InitDirective } from './directives/init.directive';
+import { IsDevModeDirective } from './directives/is-dev-mode.directive';
 import { LazyDirective, LAZY_COMPONENT_TOKEN } from './directives/lazy.directive';
 import { NestDirective } from './directives/nest.directive';
 import { RenamePropDirective } from './directives/rename-prop.directive';
@@ -28,6 +29,7 @@ const DIRECTIVES = [
   HttpDirective,
   LazyDirective,
   InitDirective,
+  IsDevModeDirective,
   NestDirective,
   RenamePropDirective,
   ReturnDirective,
@@ -68,6 +70,7 @@ export { ComposeDirective } from './directives/compose.directive';
 export { CookiesDirective } from './directives/cookies.directive';
 export { HttpDirective } from './directives/http.directive';
 export { InitDirective } from './directives/init.directive';
+export { IsDevModeDirective } from './directives/is-dev-mode.directive';
 export { LazyDirective, LAZY_COMPONENT_TOKEN } from './directives/lazy.directive';
 export { NestDirective } from './directives/nest.directive';
 export { RenamePropDirective } from './directives/rename-prop.directive';

projects/platform/src/test/directives/is-dev-mode.directive.spec.ts

@@ -0,0 +1,28 @@
+import { createHostComponentFactory, SpectatorWithHost, HostComponent } from '@netbasal/spectator';
+import { DevModeService, IsDevModeDirective } from '../../lib/directives/is-dev-mode.directive';
+
+const TEXT = 'NGX Features';
+
+describe('IsDevModeDirective', () => {
+  let host: SpectatorWithHost<IsDevModeDirective>;
+  const mock = { isDevMode: () => true };
+  const create = createHostComponentFactory({
+    component: IsDevModeDirective,
+    providers: [
+      { provide: DevModeService, useValue: mock }
+    ]
+  });
+
+  it('should create view when dev mode enabled', () => {
+    mock.isDevMode = () => true;
+    host = create(`<ng-container *isDevMode>${ TEXT }</ng-container>`);
+    expect(host.hostElement).toHaveText(TEXT);
+  });
+
+  it(`shouldn't create view when dev mode disabled`, () => {
+    mock.isDevMode = () => false;
+    host = create(`<ng-container *isDevMode>${ TEXT }</ng-container>`);
+    expect(host.hostElement).not.toHaveText(TEXT);
+  });
+
+});