From cb3a3339b37aab9ec737074ba1d55bd20fad5bf4 Mon Sep 17 00:00:00 2001 From: Ken Easson Date: Mon, 27 Aug 2018 11:34:20 -0400 Subject: [PATCH] Add's a slow process to the Kitchen Sink demo --- kitchen-sink-demo/angular.json | 13 ++++- kitchen-sink-demo/package.json | 4 +- .../src/app/app-routing.module.ts | 2 + kitchen-sink-demo/src/app/app.component.html | 3 ++ kitchen-sink-demo/src/app/app.module.ts | 2 + .../components/leaky-faucet.component.spec.ts | 24 +++++++++ .../components/leaky-faucet.component.ts | 51 +++++++++++++++++++ .../src/app/demos/leaky-faucet/index.ts | 1 + kitchen-sink-demo/src/main.augury.ts | 21 ++++++++ kitchen-sink-demo/src/main.ts | 6 +-- kitchen-sink-demo/yarn.lock | 4 ++ 11 files changed, 125 insertions(+), 6 deletions(-) create mode 100644 kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.spec.ts create mode 100644 kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.ts create mode 100644 kitchen-sink-demo/src/app/demos/leaky-faucet/index.ts create mode 100644 kitchen-sink-demo/src/main.augury.ts diff --git a/kitchen-sink-demo/angular.json b/kitchen-sink-demo/angular.json index aa32cc4..bbf35b9 100644 --- a/kitchen-sink-demo/angular.json +++ b/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" } } -} \ No newline at end of file +} diff --git a/kitchen-sink-demo/package.json b/kitchen-sink-demo/package.json index 1c2c1bc..4308d64 100644 --- a/kitchen-sink-demo/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/kitchen-sink-demo/src/app/app-routing.module.ts b/kitchen-sink-demo/src/app/app-routing.module.ts index e52192f..19db277 100644 --- a/kitchen-sink-demo/src/app/app-routing.module.ts +++ b/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({ diff --git a/kitchen-sink-demo/src/app/app.component.html b/kitchen-sink-demo/src/app/app.component.html index cdd8830..7fbce4f 100644 --- a/kitchen-sink-demo/src/app/app.component.html +++ b/kitchen-sink-demo/src/app/app.component.html @@ -37,6 +37,9 @@
  • MetadataTest
    • +
  • + Leaky Faucet +
    • diff --git a/kitchen-sink-demo/src/app/app.module.ts b/kitchen-sink-demo/src/app/app.module.ts index b5c0552..14df5bc 100644 --- a/kitchen-sink-demo/src/app/app.module.ts +++ b/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, diff --git a/kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.spec.ts b/kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.spec.ts new file mode 100644 index 0000000..aa19267 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LeakyFaucetComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LeakyFaucetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.ts b/kitchen-sink-demo/src/app/demos/leaky-faucet/components/leaky-faucet.component.ts new file mode 100644 index 0000000..7886307 --- /dev/null +++ b/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: ` +
    +

    {{ isDripping ? 'The faucet is dripping' : 'Faucet is not dripping' }}

    + +
    Faucet: {{ drip }}
    +
    + ` +}) +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); + } +} diff --git a/kitchen-sink-demo/src/app/demos/leaky-faucet/index.ts b/kitchen-sink-demo/src/app/demos/leaky-faucet/index.ts new file mode 100644 index 0000000..6aef0f7 --- /dev/null +++ b/kitchen-sink-demo/src/app/demos/leaky-faucet/index.ts @@ -0,0 +1 @@ +export { LeakyFaucetComponent } from './components/leaky-faucet.component'; diff --git a/kitchen-sink-demo/src/main.augury.ts b/kitchen-sink-demo/src/main.augury.ts new file mode 100644 index 0000000..1565ef9 --- /dev/null +++ b/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(), + ] +}); diff --git a/kitchen-sink-demo/src/main.ts b/kitchen-sink-demo/src/main.ts index 833e9f8..91ec6da 100644 --- a/kitchen-sink-demo/src/main.ts +++ b/kitchen-sink-demo/src/main.ts @@ -8,7 +8,5 @@ if (environment.production) { enableProdMode(); } -// ( window).go = function() { - platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.log(err)); -// } +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/kitchen-sink-demo/yarn.lock b/kitchen-sink-demo/yarn.lock index 0cb246e..0f78539 100644 --- a/kitchen-sink-demo/yarn.lock +++ b/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"