Add's a slow process to the Kitchen Sink demo

kitchen-sink-demo/angular.json

@@ -50,6 +50,14 @@
                   "replaceWith": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "augury": {
+              "fileReplacements": [
+                {
+                  "replace": "src/main.ts",
+                  "with": "src/main.augury.ts"
+                }
+              ]
             }
           }
         },
@@ -61,6 +69,9 @@
           "configurations": {
             "production": {
               "browserTarget": "kitchen-sink-demo:build:production"
+            },
+            "augury": {
+              "browserTarget": "kitchen-sink-demo:build:augury"
             }
           }
         },
@@ -147,4 +158,4 @@
       "prefix": "app"
     }
   }
-}
+}

kitchen-sink-demo/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "augury": "ng serve -c augury",
     "build": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
@@ -21,6 +22,7 @@
     "@angular/platform-browser": "6.0.0",
     "@angular/platform-browser-dynamic": "6.0.0",
     "@angular/router": "6.0.0",
+    "@augury/core": "^0.1.3",
     "core-js": "^2.4.1",
     "rxjs": "6.1.0",
     "zone.js": "0.8.26"
@@ -48,4 +50,4 @@
     "tslint": "^5.10.0",
     "typescript": "2.7.2"
   }
-}
+}

kitchen-sink-demo/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { AngularDirectivesComponent } from './demos/angular-directives';
 import { ChangeDetectionComponent } from './demos/change-detection';
 import { StressTesterComponent } from './demos/stress-tester';
 import { MetadataTestComponent } from './demos/metadata-test';
+import { LeakyFaucetComponent } from './demos/leaky-faucet';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -22,6 +23,7 @@ const routes: Routes = [
   { path: 'change-detection', component: ChangeDetectionComponent },
   { path: 'stress-tester', component: StressTesterComponent },
   { path: 'metadata-test', component: MetadataTestComponent },
+  { path: 'leaky-faucet', component: LeakyFaucetComponent },
 ];
 
 @NgModule({

kitchen-sink-demo/src/app/app.component.html

@@ -37,6 +37,9 @@
     <li [ngClass]="{active: path=='metadata-test'}">
       <a [routerLink]="['./metadata-test']">MetadataTest</a>
     </li>
+    <li [ngClass]="{active: path=='leaky-faucet'}">
+      <a [routerLink]="['./leaky-faucet']">Leaky Faucet</a>
+    </li>
     </ul>
   </div>
   <div class="col-md-9">

kitchen-sink-demo/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { CHANGE_DETECTION_COMPONENTS } from './demos/change-detection';
 import { STRESS_TESTER_COMPONENTS } from './demos/stress-tester';
 import { METADATA_TEST_COMPONENTS } from './demos/metadata-test';
 import { TODO_APP_SERVICES, TODO_APP_COMPONENTS } from './demos/todo-app';
+import { LeakyFaucetComponent } from './demos/leaky-faucet/components/leaky-faucet.component';
 
 @NgModule({
   declarations: [
@@ -32,6 +33,7 @@ import { TODO_APP_SERVICES, TODO_APP_COMPONENTS } from './demos/todo-app';
     ...STRESS_TESTER_COMPONENTS,
     ...METADATA_TEST_COMPONENTS,
     ...TODO_APP_COMPONENTS,
+    LeakyFaucetComponent,
   ],
   imports: [
     FormsModule,

kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { LeakyFaucetComponent } from './leaky-faucet.component';
+
+describe('LeakyFaucetComponent', () => {
+  let component: LeakyFaucetComponent;
+  let fixture: ComponentFixture<LeakyFaucetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LeakyFaucetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LeakyFaucetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'leaky-faucet',
+  template: `
+    <div>
+      <p>{{ isDripping ? 'The faucet is dripping' : 'Faucet is not dripping' }}</p>
+      <button type="button" class="btn btn-danger" (click)="toggleLeak()">
+        {{ isDripping ? 'Stop dripping' : 'Start drip' }} (calls a recursive function using setTimeout)
+      </button>
+      <div class="drip">Faucet: {{ drip }}</div>
+    </div>
+  `
+})
+export class LeakyFaucetComponent {
+  isDripping = false;
+  drip = 'start the drip';
+  dripRate = 50;
+
+  toggleLeak() {
+    if (!this.isDripping) {
+      return this.startLeak();
+    }
+    return this.stopLeak();
+  }
+
+  private startLeak() {
+    this.isDripping = true;
+    const message = 'This is a very fast dripping faucet!';
+    this.nextDrip(message);
+  }
+
+  private stopLeak() {
+    this.isDripping = false;
+  }
+
+  private nextDrip(message: string) {
+    setTimeout(() => {
+      if (!this.isDripping) {
+        return;
+      }
+      this.drip = message;
+      if (message.length > 0) {
+        this.nextDrip(message.slice(0, -1));
+        return;
+      }
+      this.drip = ' fixed ';
+      this.stopLeak();
+    }, this.dripRate);
+  }
+}

kitchen-sink-demo/src/app/demos/leaky-faucet/index.ts

@@ -0,0 +1 @@
+export { LeakyFaucetComponent } from './components/leaky-faucet.component';

kitchen-sink-demo/src/main.augury.ts

@@ -0,0 +1,21 @@
+import { enableProdMode, NgZone } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+// @todo: how to not include in prod bundle?
+import { auguryBootstrap } from '@augury/core';
+import { OverlayHealthIndicator } from '../../../augury-labs/packages/plugins/overlay-health-indicator/src';
+
+auguryBootstrap({
+  platform: platformBrowserDynamic,
+  ngModule: AppModule,
+  NgZone,
+  plugins: [
+    // new PerformanceProfilerPlugin(),
+    // new PopoutZoneMonitor(),
+    // new c.CDHeatMap(),
+    new OverlayHealthIndicator(),
+  ]
+});

kitchen-sink-demo/src/main.ts

@@ -8,7 +8,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-// (<any> window).go = function() {
-  platformBrowserDynamic().bootstrapModule(AppModule)
-    .catch(err => console.log(err));
-// }
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

kitchen-sink-demo/yarn.lock

@@ -174,6 +174,10 @@
   dependencies:
     tslib "^1.9.0"
 
+"@augury/core@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@augury/core/-/core-0.1.4.tgz#dd3f9788a6428f0d521edd97f5d09d88f303f9ad"
+
 "@ngtools/webpack@6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.0.0.tgz#e160cccd85823e9b01ee7bc5156a02510a323a34"