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

@@ -30,8 +30,6 @@ ConfirmComponent.prototype.onOkClick = function() {
   ConfirmComponent.prototype.onNotOkClick = function() {
     this.notOk.emit(true);
   }
-
-
   // #enddocregion
 
 })(window.app = window.app || {});
@@ -40,8 +38,10 @@ ConfirmComponent.prototype.onNotOkClick = function() {
 
 (function(app) {
 
+  var old = app.ConfirmComponent;
+
   // #docregion dsl
-app.ConfirmDslComponent = ng.core.Component({
+  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
 
+  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({
-  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,41 +1,51 @@
 (function(app) {
 
-// #docregion
-app.HeroDIInjectComponent = HeroDIInjectComponent;
+  var old = app.HeroComponent;
 
-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
 
+  app.HeroDIInjectComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});
 
 /////// DSL version ////////
 
 (function(app) {
 
+  var old = app.HeroComponent;
+
   // #docregion dsl
-app.HeroDIInjectDslComponent = ng.core.Component({
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-di-inject-dsl',
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
     constructor: [
       new ng.core.Inject('heroName'),
-    function HeroDIInjectDslComponent(name) {
+      function HeroComponent(name) {
         this.name = name;
       }
     ]
   });
   // #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
-  app.HeroDIComponent = HeroDIComponent;
+  var old = app.HeroComponent;
 
-  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) {
 
+  var old = app.HeroComponent;
+
   // #docregion dsl
-app.HeroDIDslComponent = ng.core.Component({
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-di-dsl',
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
     constructor: [
       app.DataService,
-    function HeroDIDslComponent(service) {
+      function HeroComponent(service) {
         this.name = service.getHeroName();
       }
     ]
   });
   // #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
-app.HeroHostComponent = HeroHostComponent;
+  var old = app.HeroComponent
 
-HeroHostComponent.annotations = [
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-host',
       template:
@@ -24,35 +26,40 @@ HeroHostComponent.annotations = [
     })
   ];
 
-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
 
+  app.HeroHostComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});
 
 //// DSL Version ////
 
 (function(app) {
 
+  var old = app.HeroComponent;
+
   // #docregion dsl
-app.HeroHostDslComponent = ng.core.Component({
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-host-dsl',
     template: `
       <h1 [class.active]="active">Hero Host (DSL)</h1>
@@ -72,7 +79,7 @@ app.HeroHostDslComponent = ng.core.Component({
     styles: ['.active {background-color: coral;}']
   })
   .Class({
-  constructor: function HeroHostDslComponent() {
+    constructor: function HeroComponent() {
       this.clicks = 0;
       this.headingClass = true;
       this.title = 'Hero Host Tooltip DSL content';
@@ -94,4 +101,7 @@ app.HeroHostDslComponent = ng.core.Component({
   });
   // #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,6 +1,8 @@
 (function(app) {
 
-app.HeroIOComponent = HeroComponent;
+  var old = app.HeroComponent
+
+  app.HeroComponent = HeroComponent;
 
   HeroComponent.annotations = [
     new ng.core.Component({
@@ -19,18 +21,23 @@ HeroComponent.prototype.onCancel = function() {
     this.cancelClicked = true;
   }
 
+  app.HeroIOComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});
 
 ///// DSL Version ////
 
 (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,8 +1,10 @@
 // #docplaster
 (function(app) {
 
+  var old = app.HeroComponent;
+
   // #docregion
-app.HeroLifecycleComponent = HeroComponent;
+  app.HeroComponent = HeroComponent;
 
   HeroComponent.annotations = [
     new ng.core.Component({
@@ -19,19 +21,24 @@ HeroComponent.prototype.ngOnInit = function() {
   };
   // #enddocregion
 
+  app.HeroLifecycleComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});
 
 /////// DSL version ////
 
 (function(app) {
 
+  var old = app.HeroComponent;
+
   // #docregion dsl
-app.HeroLifecycleDslComponent = ng.core.Component({
+  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);
@@ -39,4 +46,7 @@ app.HeroLifecycleDslComponent = ng.core.Component({
   });
   // #enddocregion dsl
 
+  app.HeroLifecycleDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});

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

@@ -26,7 +26,6 @@ HeroTitleComponent.parameters = [
     [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
     [new ng.core.Attribute('title')]
   ];
-
   // #enddocregion
 
 })(window.app = window.app || {});
@@ -35,8 +34,10 @@ HeroTitleComponent.parameters = [
 
 (function(app) {
 
+  var old = app.HeroTitleComponent;
+
   // #docregion dsl
-app.HeroTitleDslComponent = ng.core.Component({
+  app.HeroTitleComponent = ng.core.Component({
     selector: 'hero-title-dsl',
     templateUrl: 'app/hero-title.component.html'
   })
@@ -44,7 +45,7 @@ app.HeroTitleDslComponent = ng.core.Component({
     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 = '';
@@ -57,4 +58,7 @@ app.HeroTitleDslComponent = ng.core.Component({
   });
   // #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,13 +31,15 @@ HeroComponent.prototype.getName = function() { return 'Windstorm'; };
 
 (function(app) {
 
+  var old = app.HeroComponent;
+
   // #docregion dsl
-app.HeroDslComponent = ng.core.Component({
+  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";
     },
 
@@ -45,4 +47,7 @@ app.HeroDslComponent = ng.core.Component({
   });
   // #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';