CS.

karma.conf.js

@@ -3,30 +3,30 @@
 
 module.exports = function(config) {
   config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
-      require("karma-jasmine"),
-      require("karma-firefox-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage-istanbul-reporter"),
-      require("@angular-devkit/build-angular/plugins/karma")
+      require('karma-jasmine'),
+      require('karma-firefox-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: __dirname + "/coverage/ngx-errors",
-      reports: ["html", "lcovonly", "text-summary"],
-      fixWebpackSourcePaths: true
+      dir: __dirname + '/coverage/ngx-errors',
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true,
     },
-    reporters: ["progress", "kjhtml"],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ["Firefox"],
+    browsers: ['Firefox'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

src/lib/api/api-debug.component.html

 <div class="total" *ngIf="totalCount">{{ totalCount }}</div>
 <div class="new" *ngIf="unseenCount">{{ unseenCount }}</div>
 
-<div class="request" *ngFor="let request of all;" (mouseover)="seen(request)">
+<div class="request" *ngFor="let request of all" (mouseover)="seen(request)">
   <div class="open">
-    <a *ngIf="request.response?.tokenLink as tokenLink" href="{{ tokenLink }}" target="_debug">
+    <a
+      *ngIf="request.response?.tokenLink as tokenLink"
+      href="{{ tokenLink }}"
+      target="_debug"
+    >
       <i class="fa fa-search"></i>
     </a>
   </div>
 
   <div class="profiler">
-    <a *ngIf="request.method == 'GET'" href="{{ request.url }}" target="_request">
+    <a
+      *ngIf="request.method == 'GET'"
+      href="{{ request.url }}"
+      target="_request"
+    >
       <i class="fa fa-external-link-alt"></i>
     </a>
   </div>
 
   <div [ngSwitch]="request.status" class="status {{ request.status }}">
-
-    <i *ngSwitchCase="'pending'" class="fa fa-spinner fa-pulse" pTooltip="Pending"></i>
+    <i
+      *ngSwitchCase="'pending'"
+      class="fa fa-spinner fa-pulse"
+      pTooltip="Pending"
+    ></i>
 
     <i *ngSwitchCase="'cancelled'" class="fa fa-times" pTooltip="Cancelled"></i>
 
-    <span *ngSwitchDefault pTooltip="{{ request.response.status }} {{ request.response.statusText }}">
-          {{ request.response.status }}
-      </span>
-
+    <span
+      *ngSwitchDefault
+      pTooltip="{{ request.response.status }} {{ request.response.statusText }}"
+    >
+      {{ request.response.status }}
+    </span>
   </div>
 
   <div class="method">{{ request.method }}</div>
@@ -32,6 +45,4 @@
     <i *ngIf="isUnseen(request)" class="fa fa-asterisk"></i>
   </div>
   <div class="url" title="{{ request.url }}">{{ request.url }}</div>
-
-
 </div>

src/lib/api/api-debug.component.ts

@@ -29,7 +29,7 @@ interface ResponseInfo {
 }
 
 @Component({
-  selector: 'app-api-debug',
+  selector: 'dbg-api-debug',
   templateUrl: './api-debug.component.html',
   styleUrls: ['./api-debug.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,8 +40,7 @@ export class ApiDebugComponent {
   private readonly ids: string[] = [];
   private readonly apiPrefix: string;
 
-  @Output()
-  public countChanged = new EventEmitter<number>();
+  @Output() public countChanged = new EventEmitter<number>();
 
   constructor(
     interceptor: ApiDebugInterceptor,

src/lib/debug-toggle.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { DebugStateService } from './debug-state.service';
 
 @Component({
-  selector: 'app-debug-toggle',
+  selector: 'dbg-debug-toggle',
   template: `
     <ng-container *ngIf="state.available">
       <p-toggleButton

src/lib/debug.module.ts

@@ -16,6 +16,7 @@ import { TreeTableModule } from 'primeng/treetable';
 
 import { ApiDebugComponent } from './api/api-debug.component';
 import { Configuration, configurationFactory } from './configuration';
+import { DebugToggleComponent } from './debug-toggle.component';
 import { DumpPanelComponent } from './dump-panel.component';
 import { DumpValueComponent } from './dump-value.component';
 import { SpyDisplayComponent } from './spy/spy-display.component';
@@ -27,6 +28,7 @@ const EXPORTED_COMPONENTS = [
   ApiDebugComponent,
   WatchComponent,
   DumpPanelComponent,
+  DebugToggleComponent,
 ];
 
 @NgModule({

src/lib/dump-panel.component.html

-<div *ngIf="(debugState.enabled$ | async)">
+<div *ngIf="debugState.enabled$ | async">
   <p-sidebar
     [(visible)]="visible"
     [fullScreen]="fullScreen"
@@ -18,21 +18,32 @@
     <p-tabView>
       <p-tabPanel header="Watches ({{ watchCount }})">
         <div class="data-panel">
-          <app-watch-display (countChanged)="setWatchCount($event)"></app-watch-display>
+          <dbg-watch-display
+            (countChanged)="setWatchCount($event)"
+          ></dbg-watch-display>
         </div>
       </p-tabPanel>
       <p-tabPanel header="Spies ({{ spyCount }})">
         <div class="data-panel">
-          <app-spy-display (countChanged)="setSpyCount($event)"></app-spy-display>
+          <dbg-spy-display
+            (countChanged)="setSpyCount($event)"
+          ></dbg-spy-display>
         </div>
       </p-tabPanel>
       <p-tabPanel header="API ({{ apiCallCount }})">
         <div class="data-panel">
-          <app-api-debug (countChanged)="setApiCallCount($event)"></app-api-debug>
+          <dbg-api-debug
+            (countChanged)="setApiCallCount($event)"
+          ></dbg-api-debug>
         </div>
       </p-tabPanel>
     </p-tabView>
   </p-sidebar>
 
-  <p-button *ngIf="!visible" ngClass="open-button" (onClick)="visible = true" icon="fa fa-angle-double-left"></p-button>
+  <p-button
+    *ngIf="!visible"
+    ngClass="open-button"
+    (onClick)="visible = true"
+    icon="fa fa-angle-double-left"
+  ></p-button>
 </div>

src/lib/dump-panel.component.ts

@@ -7,7 +7,7 @@ import {
 import { DebugStateService } from './debug-state.service';
 
 @Component({
-  selector: 'app-dump-panel',
+  selector: 'dbg-dump-panel',
   templateUrl: './dump-panel.component.html',
   styleUrls: ['./dump-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

src/lib/dump-value.component.html

@@ -12,6 +12,8 @@
       >:
     </ng-container>
     <span class="{{ node.styleClass || 'label' }}">{{ node.label }}</span>
-    <span class="size" *ngIf="node.children">&nbsp;({{ node.children.length }})</span>
+    <span class="size" *ngIf="node.children"
+      >&nbsp;({{ node.children.length }})</span
+    >
   </ng-template>
 </p-tree>

src/lib/dump-value.component.ts

@@ -4,7 +4,7 @@ import { TreeNode } from 'primeng/api';
 type PropertyPath = Array<string | number>;
 
 @Component({
-  selector: 'app-dump-value',
+  selector: 'dbg-dump-value',
   templateUrl: './dump-value.component.html',
   styleUrls: ['./dump-value.component.scss'],
 })
@@ -15,8 +15,7 @@ export class DumpValueComponent {
   public root: TreeNode[] = [];
   public loading = true;
 
-  @Input()
-  public set value(value: any) {
+  @Input() public set value(value: any) {
     this.loading = false;
     if (value !== this._value) {
       this._value = value;

src/lib/spy/spy-display.component.html

@@ -25,9 +25,11 @@
 </form>
 
 <table class="notifications">
-  <tr *ngFor="let notif of (notifs$ | async)">
+  <tr *ngFor="let notif of notifs$ | async">
     <td class="timestamp">{{ (notif.timestamp / 1000).toFixed(3) }}</td>
-    <td class="type"><span class="fa fa-{{ eventTypes[notif.type] }}"></span></td>
+    <td class="type">
+      <span class="fa fa-{{ eventTypes[notif.type] }}"></span>
+    </td>
     <td class="tag">{{ notif.tag }}</td>
     <td class="value" *ngIf="notif.type === 'next'">
       <app-dump-value [value]="notif.payload"></app-dump-value>

src/lib/spy/spy-display.component.ts

@@ -3,10 +3,10 @@ import { FormBuilder } from '@angular/forms';
 import { combineLatest, concat, of } from 'rxjs';
 import { debounceTime, map, scan, share, tap } from 'rxjs/operators';
 
-import { Notification, notifications$, NotificationType } from '../rxjs';
+import { Notification, notifications$, NotificationType } from './spy.operator';
 
 @Component({
-  selector: 'app-spy-display',
+  selector: 'dbg-spy-display',
   templateUrl: './spy-display.component.html',
   styleUrls: ['./spy-display.component.scss'],
 })
@@ -32,8 +32,7 @@ export class SpyDisplayComponent {
   };
   public readonly eventTypeList = Object.entries(this.eventTypes);
 
-  @Output()
-  public countChanged = new EventEmitter<number>();
+  @Output() public countChanged = new EventEmitter<number>();
 
   private readonly notifList$ = notifications$.pipe(
     tap(notif => this.consoleLog(notif)),

src/lib/watch/watch-display.component.html

-<ng-container *ngFor="let value of (values$ | async); trackBy: label">
+<ng-container *ngFor="let value of values$ | async; trackBy: label">
   <p-panel header="{{ value.label }}" [toggleable]="true" ngClass="value">
     <app-dump-value [value]="value.value"></app-dump-value>
   </p-panel>

src/lib/watch/watch-display.component.ts

@@ -4,7 +4,7 @@ import { tap } from 'rxjs/operators';
 import { WatchedValue, WatchService } from './watch.service';
 
 @Component({
-  selector: 'app-watch-display',
+  selector: 'dbg-watch-display',
   templateUrl: './watch-display.component.html',
 })
 export class WatchDisplayComponent {
@@ -12,8 +12,7 @@ export class WatchDisplayComponent {
     tap(values => this.countChanged.emit(values.length))
   );
 
-  @Output()
-  public countChanged = new EventEmitter<number>();
+  @Output() public countChanged = new EventEmitter<number>();
 
   public constructor(private readonly watchService: WatchService) {}
 

src/lib/watch/watch.component.ts

@@ -10,13 +10,13 @@ import { distinctUntilChanged, map } from 'rxjs/operators';
 import { WatchedValue, WatchService } from './watch.service';
 
 @Component({
-  selector: 'app-watch',
+  selector: 'dbg-watch',
   template: '',
 })
 export class WatchComponent implements OnInit, OnDestroy {
   private readonly label$ = new BehaviorSubject('Watched value');
   private readonly value$ = new ReplaySubject<any>(1);
-  private readonly dumpValue$ = combineLatest(this.label$, this.value$).pipe(
+  private readonly dumpValue$ = combineLatest([this.label$, this.value$]).pipe(
     distinctUntilChanged(),
     map(([label, value]) => ({ label, value } as WatchedValue))
   );
@@ -25,13 +25,11 @@ export class WatchComponent implements OnInit, OnDestroy {
 
   public constructor(private readonly watchService: WatchService) {}
 
-  @Input()
-  public set label(value: any) {
+  @Input() public set label(value: any) {
     this.label$.next(value);
   }
 
-  @Input()
-  public set value(value: any) {
+  @Input() public set value(value: any) {
     this.value$.next(value);
   }
 

src/lib/watch/watch.service.ts

 import { Injectable } from '@angular/core';
+import { safeCombineLatest } from '@devatscience/ngx-rxtools/rxjs';
 import { BehaviorSubject, Observable, Unsubscribable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
-import { safeCombineLatest } from '../rxjs';
-
 export interface WatchedValue {
   readonly label: string;
   readonly value: any;

src/public-api.ts

@@ -2,21 +2,5 @@
  * Public API Surface of ngx-debug
  */
 
-export * from './lib/api/api-debug.component';
-export * from './lib/api/api-debug.interceptor';
-export * from './lib/debug.module';
-export * from './lib/debug-state.service';
-export * from './lib/debug-toggle.component';
-export * from './lib/dump-panel.component';
-export * from './lib/dump-value.component';
-export * from './lib/rxjs/index';
-export * from './lib/spy/spy-display.component';
-export * from './lib/watch/watch.component';
-export * from './lib/watch/watch-display.component';
-export * from './lib/watch/watch.service';
-export * from './lib/configuration';
-export * from './lib/debug.module';
-export * from './lib/debug-state.service';
-export * from './lib/debug-toggle.component';
-export * from './lib/dump-panel.component';
-export * from './lib/dump-value.component';
+export { DebugModule } from './lib/debug.module';
+export { spy } from './lib/spy/spy.operator';