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,38 +1,36 @@
 (function(app) {
 
-// #docregion
+  // #docregion
-app.ConfirmComponent = ConfirmComponent;
+  app.ConfirmComponent = ConfirmComponent;
 
-ConfirmComponent.annotations = [
+  ConfirmComponent.annotations = [
-  new ng.core.Component({
+    new ng.core.Component({
-    selector: 'app-confirm',
+      selector: 'app-confirm',
-    templateUrl: 'app/confirm.component.html',
+      templateUrl: 'app/confirm.component.html',
-    inputs: [
+      inputs: [
-      'okMsg',
+        'okMsg',
-      'notOkMsg: cancelMsg'
+        'notOkMsg: cancelMsg'
-    ],
+      ],
-    outputs: [
+      outputs: [
-      'ok',
+        'ok',
-      'notOk: cancel'
+        'notOk: cancel'
-    ]
+      ]
-  })
+    })
-];
+  ];
 
-function ConfirmComponent() {
+  function ConfirmComponent() {
-  this.ok    = new ng.core.EventEmitter();
+    this.ok    = new ng.core.EventEmitter();
-  this.notOk = new ng.core.EventEmitter();
+    this.notOk = new ng.core.EventEmitter();
-}
+  }
 
-ConfirmComponent.prototype.onOkClick = function() {
+  ConfirmComponent.prototype.onOkClick = function() {
-  this.ok.emit(true);
+    this.ok.emit(true);
-}
+  }
 
-ConfirmComponent.prototype.onNotOkClick = function() {
+  ConfirmComponent.prototype.onNotOkClick = function() {
-  this.notOk.emit(true);
+    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;
-  new ng.core.Component({
-    selector: 'hero-di-inject-additional',
-    template: '<hero-title title="Tour of Heroes"></hero-title>'
-  })
-];
 
-function HeroDIInjectAdditionalComponent() {}
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject-additional',
+      template: '<hero-title title="Tour of Heroes"></hero-title>'
+    })
+  ];
+
+  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;
-  selector: 'hero-di-inject-additional-dsl',
+
-  template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
+  app.HeroComponent = ng.core.Component({
-}).Class({
+    selector: 'hero-di-inject-additional-dsl',
-  constructor: function HeroDIInjectAdditionalDslComponent() { }
+    template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
-});
+  }).Class({
+    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
-  new ng.core.Component({
+  app.HeroComponent = HeroComponent;
-    selector: 'hero-di-inject',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-];
 
-HeroDIInjectComponent.parameters = [ 'heroName' ];
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
 
-function HeroDIInjectComponent(name) {
+  HeroComponent.parameters = [ 'heroName' ];
-  this.name = name;
+
-}
+  function HeroComponent(name) {
-// #enddocregion
+    this.name = name;
+  }
+  // #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({
+
-  selector: 'hero-di-inject-dsl',
+  // #docregion dsl
-  template: '<h1>Hero: {{name}}</h1>'
+  app.HeroComponent = ng.core.Component({
-})
+    selector: 'hero-di-inject-dsl',
-.Class({
+    template: '<h1>Hero: {{name}}</h1>'
-  constructor: [
+  })
-    new ng.core.Inject('heroName'),
+  .Class({
-    function HeroDIInjectDslComponent(name) {
+    constructor: [
-      this.name = name;
+      new ng.core.Inject('heroName'),
-    }
+      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({
+
-  selector: 'hero-di-dsl',
+  // #docregion dsl
-  template: '<h1>Hero: {{name}}</h1>'
+  app.HeroComponent = ng.core.Component({
-})
+    selector: 'hero-di-dsl',
-.Class({
+    template: '<h1>Hero: {{name}}</h1>'
-  constructor: [
+  })
-    app.DataService,
+  .Class({
-    function HeroDIDslComponent(service) {
+    constructor: [
-      this.name = service.getHeroName();
+      app.DataService,
-    }
+      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,49 +1,54 @@
 (function(app) {
 
-// #docregion
+  var old = app.HeroComponent
-app.HeroHostComponent = HeroHostComponent;
 
-HeroHostComponent.annotations = [
+  // #docregion
-  new ng.core.Component({
+  app.HeroComponent = HeroComponent;
-    selector: 'hero-host',
-    template:
-      '<h1 [class.active]="active">Hero Host</h1>' +
-      '<div>Heading clicks: {{clicks}}</div>',
-    host: {
-      // HostBindings to the <hero-host> element
-      '[title]': 'title',
-      '[class.heading]': 'headingClass',
-      '(click)': 'clicked()',
 
-      // HostListeners on the entire <hero-host> element
+  HeroComponent.annotations = [
-      '(mouseenter)': 'enter($event)',
+    new ng.core.Component({
-      '(mouseleave)': 'leave($event)'
+      selector: 'hero-host',
-    },
+      template:
-    // Styles within (but excluding) the <hero-host> element
+        '<h1 [class.active]="active">Hero Host</h1>' +
-    styles: ['.active {background-color: yellow;}']
+        '<div>Heading clicks: {{clicks}}</div>',
-  })
+      host: {
-];
+        // HostBindings to the <hero-host> element
+        '[title]': 'title',
+        '[class.heading]': 'headingClass',
+        '(click)': 'clicked()',
 
-function HeroHostComponent() {
+        // HostListeners on the entire <hero-host> element
-  this.clicks = 0;
+        '(mouseenter)': 'enter($event)',
-  this.headingClass = true;
+        '(mouseleave)': 'leave($event)'
-  this.title = 'Hero Host Tooltip content';
+      },
-}
+      // Styles within (but excluding) the <hero-host> element
+      styles: ['.active {background-color: yellow;}']
+    })
+  ];
 
-HeroHostComponent.prototype.clicked = function() {
+  function HeroComponent() {
-  this.clicks += 1;
+    this.clicks = 0;
-}
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip content';
+  }
 
-HeroHostComponent.prototype.enter = function(event) {
+  HeroComponent.prototype.clicked = function() {
-  this.active = true;
+    this.clicks += 1;
-  this.headingClass = false;
+  }
-}
 
-HeroHostComponent.prototype.leave = function(event) {
+  HeroComponent.prototype.enter = function(event) {
-  this.active = false;
+    this.active = true;
-  this.headingClass = true;
+    this.headingClass = false;
-}
+  }
-// #enddocregion
+
+  HeroComponent.prototype.leave = function(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+  // #enddocregion
+
+  app.HeroHostComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -51,47 +56,52 @@ HeroHostComponent.prototype.leave = function(event) {
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroComponent;
-app.HeroHostDslComponent = ng.core.Component({
-  selector: 'hero-host-dsl',
-  template: `
-    <h1 [class.active]="active">Hero Host (DSL)</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  host: {
-    // HostBindings to the <hero-host-dsl> element
-    '[title]': 'title',
-    '[class.heading]': 'headingClass',
-    '(click)': 'clicked()',
 
-    // HostListeners on the entire <hero-host-dsl> element
+  // #docregion dsl
-    '(mouseenter)': 'enter($event)',
+  app.HeroComponent = ng.core.Component({
-    '(mouseleave)': 'leave($event)'
+    selector: 'hero-host-dsl',
-  },
+    template: `
-  // Styles within (but excluding) the <hero-host-dsl> element
+      <h1 [class.active]="active">Hero Host (DSL)</h1>
-  styles: ['.active {background-color: coral;}']
+      <div>Heading clicks: {{clicks}}</div>
-})
+    `,
-.Class({
+    host: {
-  constructor: function HeroHostDslComponent() {
+      // HostBindings to the <hero-host-dsl> element
-    this.clicks = 0;
+      '[title]': 'title',
-    this.headingClass = true;
+      '[class.heading]': 'headingClass',
-    this.title = 'Hero Host Tooltip DSL content';
+      '(click)': 'clicked()',
-  },
 
-  clicked() {
+      // HostListeners on the entire <hero-host-dsl> element
-    this.clicks += 1;
+      '(mouseenter)': 'enter($event)',
-  },
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host-dsl> element
+    styles: ['.active {background-color: coral;}']
+  })
+  .Class({
+    constructor: function HeroComponent() {
+      this.clicks = 0;
+      this.headingClass = true;
+      this.title = 'Hero Host Tooltip DSL content';
+    },
 
-  enter(event) {
+    clicked() {
-    this.active = true;
+      this.clicks += 1;
-    this.headingClass = false;
+    },
-  },
 
-  leave(event) {
+    enter(event) {
-    this.active = false;
+      this.active = true;
-    this.headingClass = true;
+      this.headingClass = false;
-  }
+    },
-});
+
-// #enddocregion dsl
+    leave(event) {
+      this.active = false;
+      this.headingClass = true;
+    }
+  });
+  // #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;
-  new ng.core.Component({
-    selector: 'hero-io',
-    templateUrl: 'app/hero-io.component.html'
-  })
-];
 
-function HeroComponent() { }
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-io',
+      templateUrl: 'app/hero-io.component.html'
+    })
+  ];
 
-HeroComponent.prototype.onOk = function() {
+  function HeroComponent() { }
-  this.okClicked = true;
-}
 
-HeroComponent.prototype.onCancel = function() {
+  HeroComponent.prototype.onOk = function() {
-  this.cancelClicked = true;
+    this.okClicked = true;
-}
+  }
+
+  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
-  new ng.core.Component({
+  app.HeroComponent = HeroComponent;
-    selector: 'hero-lifecycle',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-];
 
-function HeroComponent() { }
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-lifecycle',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
 
-HeroComponent.prototype.ngOnInit = function() {
+  function HeroComponent() { }
-  // todo: fetch from server async
+
-  setTimeout(() => this.name = 'Windstorm', 0);
+  HeroComponent.prototype.ngOnInit = function() {
-};
+    // todo: fetch from server async
-// #enddocregion
+    setTimeout(() => this.name = 'Windstorm', 0);
+  };
+  // #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,92 +1,92 @@
 (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',
+    selector: 'content-child',
-  template:
+    template:
-    '<span class="content-child" *ngIf="active">' +
+      '<span class="content-child" *ngIf="active">' +
-      'Active' +
+        'Active' +
-    '</span>'
+      '</span>'
-}).Class({
+  }).Class({
-  constructor: function ContentChildComponent() {
+    constructor: function ContentChildComponent() {
-    this.active = false;
+      this.active = false;
-  },
-
-  activate: function() {
-    this.active = !this.active;
-  }
-});
-
-////////////////////
-
-// #docregion content
-app.heroQueries.ViewChildComponent = ng.core.Component({
-  selector: 'view-child',
-  template:
-    '<h2 [class.active]=active>' +
-      '{{hero.name}} ' +
-      '<ng-content></ng-content>' +
-    '</h2>',
-  styles: ['.active {font-weight: bold; background-color: skyblue;}'],
-  inputs: ['hero'],
-  queries: {
-    content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
-  }
-})
-.Class({
-  constructor: function HeroQueriesHeroComponent() {
-    this.active = false;
-  },
-
-  activate: function() {
-    this.active = !this.active;
-    this.content.activate();
-  }
-});
-// #enddocregion content
-
-////////////////////
-
-// #docregion view
-app.heroQueries.HeroQueriesComponent = ng.core.Component({
-  selector: 'hero-queries',
-  template:
-    '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
-      '<content-child></content-child>' +
-    '</view-child>' +
-    '<button (click)="activate()">{{buttonLabel}} All</button>',
-  queries: {
-    views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
-  }
-})
-.Class({
-  constructor: function HeroQueriesComponent() {
-    this.active = false;
-    this.heroData = [
-      {id: 1, name: 'Windstorm'},
-      {id: 2, name: 'LaughingGas'}
-    ];
-  },
-
-  activate: function() {
-    this.active = !this.active;
-    this.views.forEach(function(view) {
-      view.activate();
-    });
-  },
-});
-
-// #docregion defined-property
-// add prototype property w/ getter outside the DSL
-var proto = app.heroQueries.HeroQueriesComponent.prototype;
-Object.defineProperty(proto, "buttonLabel", {
-    get: function () {
-        return this.active ? 'Deactivate' : 'Activate';
     },
-    enumerable: true
+
-});
+    activate: function() {
-// #enddocregion defined-property
+      this.active = !this.active;
-// #enddocregion view
+    }
+  });
+
+  ////////////////////
+
+  // #docregion content
+  app.heroQueries.ViewChildComponent = ng.core.Component({
+    selector: 'view-child',
+    template:
+      '<h2 [class.active]=active>' +
+        '{{hero.name}} ' +
+        '<ng-content></ng-content>' +
+      '</h2>',
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesHeroComponent() {
+      this.active = false;
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.content.activate();
+    }
+  });
+  // #enddocregion content
+
+  ////////////////////
+
+  // #docregion view
+  app.heroQueries.HeroQueriesComponent = ng.core.Component({
+    selector: 'hero-queries',
+    template:
+      '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+        '<content-child></content-child>' +
+      '</view-child>' +
+      '<button (click)="activate()">{{buttonLabel}} All</button>',
+    queries: {
+      views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesComponent() {
+      this.active = false;
+      this.heroData = [
+        {id: 1, name: 'Windstorm'},
+        {id: 2, name: 'LaughingGas'}
+      ];
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.views.forEach(function(view) {
+        view.activate();
+      });
+    },
+  });
+
+  // #docregion defined-property
+  // add prototype property w/ getter outside the DSL
+  var proto = app.heroQueries.HeroQueriesComponent.prototype;
+  Object.defineProperty(proto, "buttonLabel", {
+      get: function () {
+          return this.active ? 'Deactivate' : 'Activate';
+      },
+      enumerable: true
+  });
+  // #enddocregion defined-property
+  // #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({
+    new ng.core.Component({
-    selector: 'hero-title',
+      selector: 'hero-title',
-    templateUrl: 'app/hero-title.component.html'
+      templateUrl: 'app/hero-title.component.html'
-  })
+    })
-];
+  ];
-// #enddocregion templateUrl
+  // #enddocregion templateUrl
 
-function HeroTitleComponent(titlePrefix, title) {
+  function HeroTitleComponent(titlePrefix, title) {
-    this.titlePrefix = titlePrefix;
+      this.titlePrefix = titlePrefix;
-    this.title  = title;
+      this.title  = title;
-    this.msg = '';
+      this.msg = '';
-}
+  }
 
-HeroTitleComponent.prototype.ok = function() {
+  HeroTitleComponent.prototype.ok = function() {
-  this.msg = 'OK!';
+    this.msg = 'OK!';
-}
+  }
 
-HeroTitleComponent.parameters = [
+  HeroTitleComponent.parameters = [
-  [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+    [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
-  [new ng.core.Attribute('title')]
+    [new ng.core.Attribute('title')]
-];
+  ];
-
+  // #enddocregion
-// #enddocregion
 
 })(window.app = window.app || {});
 
@@ -35,26 +34,31 @@ HeroTitleComponent.parameters = [
 
 (function(app) {
 
-// #docregion dsl
+  var old = app.HeroTitleComponent;
-app.HeroTitleDslComponent = ng.core.Component({
-  selector: 'hero-title-dsl',
-  templateUrl: 'app/hero-title.component.html'
-})
-.Class({
-  constructor: [
-    [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
-    new ng.core.Attribute('title'),
-    function HeroTitleDslComponent(titlePrefix, title) {
-      this.titlePrefix = titlePrefix;
-      this.title  = title;
-      this.msg = '';
-    }
-  ],
 
-  ok: function() {
+  // #docregion dsl
-    this.msg = 'OK!';
+  app.HeroTitleComponent = ng.core.Component({
-  }
+    selector: 'hero-title-dsl',
-});
+    templateUrl: 'app/hero-title.component.html'
-// #enddocregion dsl
+  })
+  .Class({
+    constructor: [
+      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
+      new ng.core.Attribute('title'),
+      function HeroTitleComponent(titlePrefix, title) {
+        this.titlePrefix = titlePrefix;
+        this.title  = title;
+        this.msg = '';
+      }
+    ],
+
+    ok: function() {
+      this.msg = 'OK!';
+    }
+  });
+  // #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';