feat: add a stress tester page which adds ng2 components into the tree

example-apps/kitchen-sink-example/source/components/stress-tester/stress-tester.ts

@@ -0,0 +1,49 @@
+import {Component} from '@angular/core';
+import {FORM_DIRECTIVES, NgForm, NgIf} from '@angular/common';
+
+// StressComponent wraps a list item around an Angular 2 component
+// for Augury to detect.
+@Component({
+ selector: 'stress-item',
+ inputs: ['value'],
+ template: `
+ <li>{{value}}</li>
+ `
+})
+class StressItem {
+}
+
+//
+@Component({
+ selector: 'stress-tester',
+ directives: [FORM_DIRECTIVES, NgForm, StressItem],
+ template: `
+ <p>Stress test Augury by adding values to the list. 
+ Warning: may crash Augury and/or Chrome.</p>
+ <form #regForm="ngForm" (ngSubmit)="onSubmit(regForm)" novalidate>
+ <div>
+ <label for="node-count">Specify number of values: </label>
+ <input type="number" id="node-count" ngControl="count">
+ </div>
+ <button type="submit">Add</button>
+ </form>
+ <br>
+ <h4>List of values</h4>
+ <ul>
+ <stress-item *ngFor="let val of values" value="{{val}}"></stress-item>
+ <li *ngIf="values.length === 0">Hint: type a number and click Add above.</li>
+ </ul>
+ `
+})
+export default class StressTester {
+ values: any = [];
+
+ // onSubmit make an array of the specified count. Each element will result in
+ // a new Angular 2 component.
+ onSubmit(regForm: NgForm) {
+ let maxCount = regForm.value.count;
+ for (let i = 0; i < maxCount; i++) {
+ this.values.push(i);
+ }
+ }
+}

example-apps/kitchen-sink-example/source/containers/kitchen-sink.ts

@@ -19,6 +19,7 @@ import ChangeDetection from '../components/change-detection/change-detection';
 import AngularDirectives from
  '../components/angular-directives/angular-directives';
 import Demo from '../components/demo/demo';
+import StressTester from '../components/stress-tester/stress-tester';
 
 @RouteConfig([
  { path: '/', component: Home, name: 'Home' },
@@ -35,7 +36,8 @@ import Demo from '../components/demo/demo';
  name: 'AngularDirectives' },
  { path: '/change-detection', component: ChangeDetection,
  name: 'ChangeDetection' },
- { path: '/demo', component: Demo, name: 'DemoForNgConf' }
+ { path: '/demo', component: Demo, name: 'DemoForNgConf' },
+ { path: '/stress-tester', component: StressTester, name: 'StressTester' }
 ])
 @Component({
  selector: 'kitchen-sink',
@@ -81,6 +83,9 @@ import Demo from '../components/demo/demo';
  <li [ngClass]="{active: path=='change-detection'}">
  <a [routerLink]="['./ChangeDetection']">ChangeDetection</a>
  </li>
+ <li [ngClass]="{active: path=='stress-tester'}">
+ <a [routerLink]="['./StressTester']">StressTester</a>
+ </li>
  </ul>
  </div>
  <div class="col-md-9">