docs(ts->js): example tweaks for more consistent reading of JS (#2938)

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6

@@ -1,7 +1,7 @@
+// #docregion
 import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
-// #docregion
 @Component({
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6

@@ -1,3 +1,4 @@
+// #docregion
 // #docregion metadata
 import { Component } from '@angular/core';
 

public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6

@@ -1,7 +1,7 @@
+// #docregion
 import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
-// #docregion
 export class HeroComponent {
   constructor(dataService) {
     this.name = dataService.getHeroName();
@@ -18,5 +18,4 @@ HeroComponent.annotations = [
 HeroComponent.parameters = [
   [DataService]
 ];
-
 // #enddocregion

public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6

@@ -1,4 +1,5 @@
 // #docplaster
+// #docregion
 // #docregion metadata
 import { Component } from '@angular/core';
 

public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js

@@ -1,9 +1,9 @@
 (function(app) {
 
-// #docregion
+  // #docregion
-app.ConfirmComponent = ConfirmComponent;
+  app.ConfirmComponent = ConfirmComponent;
 
-ConfirmComponent.annotations = [
+  ConfirmComponent.annotations = [
     new ng.core.Component({
       selector: 'app-confirm',
       templateUrl: 'app/confirm.component.html',
@@ -16,23 +16,21 @@ ConfirmComponent.annotations = [
         'notOk: cancel'
       ]
     })
-];
+  ];
 
-function ConfirmComponent() {
+  function ConfirmComponent() {
     this.ok    = new ng.core.EventEmitter();
     this.notOk = new ng.core.EventEmitter();
-}
+  }
 
-ConfirmComponent.prototype.onOkClick = function() {
+  ConfirmComponent.prototype.onOkClick = function() {
     this.ok.emit(true);
-}
+  }
 
-ConfirmComponent.prototype.onNotOkClick = function() {
+  ConfirmComponent.prototype.onNotOkClick = function() {
     this.notOk.emit(true);
-}
+  }
-
+  // #enddocregion
-
-// #enddocregion
 
 })(window.app = window.app || {});
 
@@ -40,8 +38,10 @@ ConfirmComponent.prototype.onNotOkClick = function() {
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.ConfirmComponent;
-app.ConfirmDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.ConfirmComponent = ng.core.Component({
     selector: 'app-confirm-dsl',
     templateUrl: 'app/confirm.component.html',
     inputs: [
@@ -54,7 +54,7 @@ app.ConfirmDslComponent = ng.core.Component({
     ]
   })
   .Class({
-    constructor: function ConfirmDslComponent() {
+    constructor: function ConfirmComponent() {
       this.ok    = new ng.core.EventEmitter();
       this.notOk = new ng.core.EventEmitter();
     },
@@ -67,7 +67,9 @@ app.ConfirmDslComponent = ng.core.Component({
       this.notOk.emit(true);
     }
   });
+  // #enddocregion dsl
 
-// #enddocregion dsl
+  app.ConfirmDslComponent = app.ConfirmComponent;
+  app.ConfirmComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js

@@ -1,26 +1,36 @@
 (function(app) {
 
-app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
+  var old = app.HeroComponent;
 
-HeroDIInjectAdditionalComponent.annotations = [
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di-inject-additional',
       template: '<hero-title title="Tour of Heroes"></hero-title>'
     })
-];
+  ];
 
-function HeroDIInjectAdditionalComponent() {}
+  function HeroComponent() {}
+
+  app.HeroDIInjectAdditionalComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
 ////// DSL Version /////////
 (function(app) {
 
-app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
+  var old = app.HeroComponent;
+
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-di-inject-additional-dsl',
     template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
-}).Class({
+  }).Class({
-  constructor: function HeroDIInjectAdditionalDslComponent() { }
+    constructor: function HeroComponent() { }
-});
+  });
+
+  app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js

@@ -1,21 +1,26 @@
 (function(app) {
 
-// #docregion
+  var old = app.HeroComponent;
-app.HeroDIInjectComponent = HeroDIInjectComponent;
 
-HeroDIInjectComponent.annotations = [
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di-inject',
       template: '<h1>Hero: {{name}}</h1>'
     })
-];
+  ];
 
-HeroDIInjectComponent.parameters = [ 'heroName' ];
+  HeroComponent.parameters = [ 'heroName' ];
 
-function HeroDIInjectComponent(name) {
+  function HeroComponent(name) {
     this.name = name;
-}
+  }
-// #enddocregion
+  // #enddocregion
+
+  app.HeroDIInjectComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -23,19 +28,24 @@ function HeroDIInjectComponent(name) {
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroComponent;
-app.HeroDIInjectDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-di-inject-dsl',
     template: '<h1>Hero: {{name}}</h1>'
-})
+  })
-.Class({
+  .Class({
     constructor: [
       new ng.core.Inject('heroName'),
-    function HeroDIInjectDslComponent(name) {
+      function HeroComponent(name) {
         this.name = name;
       }
     ]
-});
+  });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroDIInjectDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js

@@ -1,23 +1,26 @@
 (function(app) {
 
-  // #docregion
+  var old = app.HeroComponent;
-  app.HeroDIComponent = HeroDIComponent;
 
-  HeroDIComponent.annotations = [
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',
       template: '<h1>Hero: {{name}}</h1>'
     })
   ];
 
-  HeroDIComponent.parameters = [ app.DataService ];
+  HeroComponent.parameters = [ app.DataService ];
 
-  function HeroDIComponent(dataService) {
+  function HeroComponent(dataService) {
     this.name = dataService.getHeroName();
   }
-
   // #enddocregion
 
+  app.HeroDIComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -25,19 +28,24 @@
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroComponent;
-app.HeroDIDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-di-dsl',
     template: '<h1>Hero: {{name}}</h1>'
-})
+  })
-.Class({
+  .Class({
     constructor: [
       app.DataService,
-    function HeroDIDslComponent(service) {
+      function HeroComponent(service) {
         this.name = service.getHeroName();
       }
     ]
-});
+  });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroDIDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js

@@ -1,9 +1,11 @@
 (function(app) {
 
-// #docregion
+  var old = app.HeroComponent
-app.HeroHostComponent = HeroHostComponent;
 
-HeroHostComponent.annotations = [
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-host',
       template:
@@ -22,28 +24,31 @@ HeroHostComponent.annotations = [
       // Styles within (but excluding) the <hero-host> element
       styles: ['.active {background-color: yellow;}']
     })
-];
+  ];
 
-function HeroHostComponent() {
+  function HeroComponent() {
     this.clicks = 0;
     this.headingClass = true;
     this.title = 'Hero Host Tooltip content';
-}
+  }
 
-HeroHostComponent.prototype.clicked = function() {
+  HeroComponent.prototype.clicked = function() {
     this.clicks += 1;
-}
+  }
 
-HeroHostComponent.prototype.enter = function(event) {
+  HeroComponent.prototype.enter = function(event) {
     this.active = true;
     this.headingClass = false;
-}
+  }
 
-HeroHostComponent.prototype.leave = function(event) {
+  HeroComponent.prototype.leave = function(event) {
     this.active = false;
     this.headingClass = true;
-}
+  }
-// #enddocregion
+  // #enddocregion
+
+  app.HeroHostComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -51,8 +56,10 @@ HeroHostComponent.prototype.leave = function(event) {
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroComponent;
-app.HeroHostDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-host-dsl',
     template: `
       <h1 [class.active]="active">Hero Host (DSL)</h1>
@@ -70,9 +77,9 @@ app.HeroHostDslComponent = ng.core.Component({
     },
     // Styles within (but excluding) the <hero-host-dsl> element
     styles: ['.active {background-color: coral;}']
-})
+  })
-.Class({
+  .Class({
-  constructor: function HeroHostDslComponent() {
+    constructor: function HeroComponent() {
       this.clicks = 0;
       this.headingClass = true;
       this.title = 'Hero Host Tooltip DSL content';
@@ -91,7 +98,10 @@ app.HeroHostDslComponent = ng.core.Component({
       this.active = false;
       this.headingClass = true;
     }
-});
+  });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroHostDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js

@@ -1,23 +1,28 @@
 (function(app) {
 
-app.HeroIOComponent = HeroComponent;
+  var old = app.HeroComponent
 
-HeroComponent.annotations = [
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-io',
       templateUrl: 'app/hero-io.component.html'
     })
-];
+  ];
 
-function HeroComponent() { }
+  function HeroComponent() { }
 
-HeroComponent.prototype.onOk = function() {
+  HeroComponent.prototype.onOk = function() {
     this.okClicked = true;
-}
+  }
 
-HeroComponent.prototype.onCancel = function() {
+  HeroComponent.prototype.onCancel = function() {
     this.cancelClicked = true;
-}
+  }
+
+  app.HeroIOComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -25,12 +30,14 @@ HeroComponent.prototype.onCancel = function() {
 
 (function(app) {
 
-app.HeroIODslComponent = ng.core.Component({
+  var old = app.HeroComponent
+
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-io-dsl',
     templateUrl: 'app/hero-io-dsl.component.html'
   })
   .Class({
-    constructor: function HeroIODslComponent() { },
+    constructor: function HeroComponent() { },
     onOk: function() {
       this.okClicked = true;
     },
@@ -39,4 +46,7 @@ app.HeroIODslComponent = ng.core.Component({
     }
   });
 
+  app.HeroIODslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js

@@ -1,23 +1,28 @@
 // #docplaster
 (function(app) {
 
-// #docregion
+  var old = app.HeroComponent;
-app.HeroLifecycleComponent = HeroComponent;
 
-HeroComponent.annotations = [
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-lifecycle',
       template: '<h1>Hero: {{name}}</h1>'
     })
-];
+  ];
 
-function HeroComponent() { }
+  function HeroComponent() { }
 
-HeroComponent.prototype.ngOnInit = function() {
+  HeroComponent.prototype.ngOnInit = function() {
     // todo: fetch from server async
     setTimeout(() => this.name = 'Windstorm', 0);
-};
+  };
-// #enddocregion
+  // #enddocregion
+
+  app.HeroLifecycleComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -25,18 +30,23 @@ HeroComponent.prototype.ngOnInit = function() {
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroComponent;
-app.HeroLifecycleDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-lifecycle-dsl',
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
-    constructor: function HeroLifecycleDslComponent() { },
+    constructor: function HeroComponent() { },
     ngOnInit: function() {
       // todo: fetch from server async
       setTimeout(() => this.name = 'Windstorm', 0);
     }
   });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroLifecycleDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js

@@ -1,14 +1,14 @@
 (function(app) {
 
-app.heroQueries = app.heroQueries || {};
+  app.heroQueries = app.heroQueries || {};
 
-app.heroQueries.ContentChildComponent = ng.core.Component({
+  app.heroQueries.ContentChildComponent = ng.core.Component({
     selector: 'content-child',
     template:
       '<span class="content-child" *ngIf="active">' +
         'Active' +
       '</span>'
-}).Class({
+  }).Class({
     constructor: function ContentChildComponent() {
       this.active = false;
     },
@@ -16,12 +16,12 @@ app.heroQueries.ContentChildComponent = ng.core.Component({
     activate: function() {
       this.active = !this.active;
     }
-});
+  });
 
-////////////////////
+  ////////////////////
 
-// #docregion content
+  // #docregion content
-app.heroQueries.ViewChildComponent = ng.core.Component({
+  app.heroQueries.ViewChildComponent = ng.core.Component({
     selector: 'view-child',
     template:
       '<h2 [class.active]=active>' +
@@ -33,8 +33,8 @@ app.heroQueries.ViewChildComponent = ng.core.Component({
     queries: {
       content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
     }
-})
+  })
-.Class({
+  .Class({
     constructor: function HeroQueriesHeroComponent() {
       this.active = false;
     },
@@ -43,13 +43,13 @@ app.heroQueries.ViewChildComponent = ng.core.Component({
       this.active = !this.active;
       this.content.activate();
     }
-});
+  });
-// #enddocregion content
+  // #enddocregion content
 
-////////////////////
+  ////////////////////
 
-// #docregion view
+  // #docregion view
-app.heroQueries.HeroQueriesComponent = ng.core.Component({
+  app.heroQueries.HeroQueriesComponent = ng.core.Component({
     selector: 'hero-queries',
     template:
       '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
@@ -59,8 +59,8 @@ app.heroQueries.HeroQueriesComponent = ng.core.Component({
     queries: {
       views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
     }
-})
+  })
-.Class({
+  .Class({
     constructor: function HeroQueriesComponent() {
       this.active = false;
       this.heroData = [
@@ -75,18 +75,18 @@ app.heroQueries.HeroQueriesComponent = ng.core.Component({
         view.activate();
       });
     },
-});
+  });
 
-// #docregion defined-property
+  // #docregion defined-property
-// add prototype property w/ getter outside the DSL
+  // add prototype property w/ getter outside the DSL
-var proto = app.heroQueries.HeroQueriesComponent.prototype;
+  var proto = app.heroQueries.HeroQueriesComponent.prototype;
-Object.defineProperty(proto, "buttonLabel", {
+  Object.defineProperty(proto, "buttonLabel", {
       get: function () {
           return this.active ? 'Deactivate' : 'Activate';
       },
       enumerable: true
-});
+  });
-// #enddocregion defined-property
+  // #enddocregion defined-property
-// #enddocregion view
+  // #enddocregion view
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js

@@ -1,33 +1,32 @@
 (function(app) {
 
-// #docregion
+  // #docregion
-app.HeroTitleComponent = HeroTitleComponent;
+  app.HeroTitleComponent = HeroTitleComponent;
 
-// #docregion templateUrl
+  // #docregion templateUrl
-HeroTitleComponent.annotations = [
+  HeroTitleComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-title',
       templateUrl: 'app/hero-title.component.html'
     })
-];
+  ];
-// #enddocregion templateUrl
+  // #enddocregion templateUrl
 
-function HeroTitleComponent(titlePrefix, title) {
+  function HeroTitleComponent(titlePrefix, title) {
       this.titlePrefix = titlePrefix;
       this.title  = title;
       this.msg = '';
-}
+  }
 
-HeroTitleComponent.prototype.ok = function() {
+  HeroTitleComponent.prototype.ok = function() {
     this.msg = 'OK!';
-}
+  }
 
-HeroTitleComponent.parameters = [
+  HeroTitleComponent.parameters = [
     [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
     [new ng.core.Attribute('title')]
-];
+  ];
-
+  // #enddocregion
-// #enddocregion
 
 })(window.app = window.app || {});
 
@@ -35,16 +34,18 @@ HeroTitleComponent.parameters = [
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroTitleComponent;
-app.HeroTitleDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.HeroTitleComponent = ng.core.Component({
     selector: 'hero-title-dsl',
     templateUrl: 'app/hero-title.component.html'
-})
+  })
-.Class({
+  .Class({
     constructor: [
       [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
       new ng.core.Attribute('title'),
-    function HeroTitleDslComponent(titlePrefix, title) {
+      function HeroTitleComponent(titlePrefix, title) {
         this.titlePrefix = titlePrefix;
         this.title  = title;
         this.msg = '';
@@ -54,7 +55,10 @@ app.HeroTitleDslComponent = ng.core.Component({
     ok: function() {
       this.msg = 'OK!';
     }
-});
+  });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroTitleDslComponent = app.HeroTitleComponent;
+  app.HeroTitleComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero.component.js

@@ -31,18 +31,23 @@ HeroComponent.prototype.getName = function() { return 'Windstorm'; };
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroComponent;
-app.HeroDslComponent = ng.core.Component({
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-view-dsl',
     template: '<h1>{{title}}: {{getName()}}</h1>',
   })
   .Class({
-    constructor: function HeroDslComponent() {
+    constructor: function HeroComponent() {
       this.title = "Hero Detail";
     },
 
     getName: function() { return 'Windstorm'; }
   });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts

@@ -1,7 +1,7 @@
+// #docregion
 import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
-// #docregion
 @Component({
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`

public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts

@@ -1,3 +1,4 @@
+// #docregion
 // #docregion metadata
 import { Component } from '@angular/core';