Change detection optimizations

lib/components/JsonSchema/json-schema.js

@@ -11,7 +11,8 @@ import JsonPointer from '../../utils/JsonPointer';
   templateUrl: './lib/components/JsonSchema/json-schema.html',
   styleUrls: ['./lib/components/JsonSchema/json-schema.css'],
   directives: [JsonSchema, DropDown],
-  inputs: ['isArray', 'final', 'nestOdd', 'childFor', 'isRequestSchema']
+  inputs: ['isArray', 'final', 'nestOdd', 'childFor', 'isRequestSchema'],
+  detect: true
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ElementRef]])
 export class JsonSchema extends BaseComponent {

lib/components/Method/method.js

@@ -14,7 +14,8 @@ import { RequestSamples } from '../RequestSamples/request-samples';
   templateUrl: './lib/components/Method/method.html',
   styleUrls: ['./lib/components/Method/method.css'],
   directives: [ ParamsList, ResponsesList, ResponsesSamples, SchemaSample, RequestSamples ],
-  inputs: ['tag']
+  inputs: ['tag'],
+  detect: true
 })
 export class Method extends BaseComponent {
   constructor(schemaMgr) {

lib/components/MethodsList/methods-list.js

@@ -10,7 +10,8 @@ import { EncodeURIComponentPipe } from '../../utils/pipes';
   templateUrl: './lib/components/MethodsList/methods-list.html',
   styleUrls: ['./lib/components/MethodsList/methods-list.css'],
   directives: [ forwardRef(() => Method) ],
-  pipes: [ EncodeURIComponentPipe ]
+  pipes: [ EncodeURIComponentPipe ],
+  detect: true
 })
 export class MethodsList extends BaseComponent {
 

lib/components/Redoc/redoc.js

@@ -29,7 +29,9 @@ var _modeLocked = false;
   ],
   templateUrl: './lib/components/Redoc/redoc.html',
   styleUrls: ['./lib/components/Redoc/redoc.css'],
-  directives: [ ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar ]
+  directives: [ ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar ],
+  detect: true,
+  onPushOnly: false
 })
 @Reflect.metadata('parameters', [
   [SchemaManager], [OptionsService], [ElementRef], [RedocEventsService]])

lib/components/RequestSamples/request-samples.html

@@ -1,6 +1,6 @@
 <header *ngIf="data.schemaPointer || data.samples.length"> Request samples </header>
 <schema-sample *ngIf="!data.samples.length" [pointer]="data.schemaPointer"> </schema-sample>
-<tabs *ngIf="data.samples.length" (change)=changeLangNotify($event)>
+<tabs *ngIf="data.samples.length" [selected] = "selectedLang" (change)=changeLangNotify($event)>
   <tab tabTitle="JSON">
     <schema-sample [pointer]="data.schemaPointer"> </schema-sample>
   </tab>

lib/components/RequestSamples/request-samples.js

@@ -15,7 +15,9 @@ import { RedocEventsService } from '../../services/index';
   styleUrls: ['./lib/components/RequestSamples/request-samples.css'],
   directives: [SchemaSample, Tabs, Tab],
   inputs: ['schemaPointer'],
-  pipes: [PrismPipe]
+  pipes: [PrismPipe],
+  detect: true,
+  onPushOnly: false
 })
 @Reflect.metadata('parameters', [[SchemaManager], [RedocEventsService], [new ViewChildren(Tabs), QueryList]])
 export class RequestSamples extends BaseComponent {
@@ -25,23 +27,14 @@ export class RequestSamples extends BaseComponent {
       this.childTabs = childQuery.first;
     });
     this.events = events;
+    this.selectedLang = this.events.samplesLanguageChanged;
   }
 
-  init() {
-    this.subscribeForEvents();
-  }
 
   changeLangNotify(lang) {
     this.events.samplesLanguageChanged.next(lang);
   }
 
-  subscribeForEvents() {
-    this.events.samplesLanguageChanged.subscribe((sampleLang) => {
-      if (!this.childTabs) return;
-      this.childTabs.selectyByTitle(sampleLang);
-    });
-  }
-
   prepareModel() {
     this.data = {};
     this.data.schemaPointer = JsonPointer.join(this.schemaPointer, 'schema');

lib/components/ResponsesList/responses-list.js

@@ -16,7 +16,8 @@ function isNumeric(n) {
   selector: 'responses-list',
   templateUrl: './lib/components/ResponsesList/responses-list.html',
   styleUrls: ['./lib/components/ResponsesList/responses-list.css'],
-  directives: [JsonSchema, Zippy, JsonSchemaLazy]
+  directives: [JsonSchema, Zippy, JsonSchemaLazy],
+  detect: true
 })
 @Reflect.metadata('parameters', [[SchemaManager], [OptionsService]])
 export class ResponsesList extends BaseComponent {

lib/components/SideMenu/side-menu.js

@@ -11,7 +11,9 @@ import { ScrollService, Hash, MenuService, OptionsService } from '../../services
   selector: 'side-menu',
   templateUrl: './lib/components/SideMenu/side-menu.html',
   providers: [ScrollService, MenuService, Hash],
-  styleUrls: ['./lib/components/SideMenu/side-menu.css']
+  styleUrls: ['./lib/components/SideMenu/side-menu.css'],
+  detect: true,
+  onPushOnly: false
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ElementRef], [BrowserDomAdapter],
   [ScrollService], [MenuService], [Hash], [OptionsService], [ChangeDetectorRef]])

lib/components/base.js

@@ -67,6 +67,7 @@ export function RedocComponent(options) {
   let inputs = safeConcat(options.inputs, commonInputs);
   let directives = safeConcat(options.directives, CORE_DIRECTIVES);
   let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe, MarkedPipe, JsonPipe, AsyncPipe]);
+  if (options.onPushOnly === undefined) options.onPushOnly = true;
 
   return function decorator(target) {
 
@@ -75,7 +76,9 @@ export function RedocComponent(options) {
       inputs: inputs,
       outputs: options.outputs,
       providers: options.providers,
-      changeDetection: options.changeDetection || ChangeDetectionStrategy.Default,
+      changeDetection: options.detect ?
+        (options.onPushOnly ? ChangeDetectionStrategy.OnPush : ChangeDetectionStrategy.Default) :
+        ChangeDetectionStrategy.Detached,
       templateUrl: options.templateUrl,
       template: options.template,
       styles: options.styles,
@@ -83,6 +86,9 @@ export function RedocComponent(options) {
       pipes: pipes
     });
 
+    console.log(options.selector, options.detect ?
+      (options.onPushOnly ? 'OnPush' : 'Default') : 'Detached');
+
     return componentDecorator(target) || target;
   };
 }

lib/shared/components/Tabs/tabs.js

@@ -1,11 +1,13 @@
 'use strict';
 
-import {Component, EventEmitter} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
+import { Component, EventEmitter } from '@angular/core';
+import { CORE_DIRECTIVES } from '@angular/common';
+import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'tabs',
   events: ['change'],
+  inputs: ['selected'],
   template: `
     <ul>
       <li *ngFor="let tab of tabs" [ngClass]="{active: tab.active}" (click)="selectTab(tab)"
@@ -14,12 +16,15 @@ import {CORE_DIRECTIVES} from '@angular/common';
     <ng-content></ng-content>
   `,
   directives: [CORE_DIRECTIVES],
-  styleUrls: ['./lib/shared/components/Tabs/tabs.css']
+  styleUrls: ['./lib/shared/components/Tabs/tabs.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
+@Reflect.metadata('parameters', [[ChangeDetectorRef]])
 export class Tabs {
-  constructor() {
+  constructor(changeDetector) {
     this.tabs = [];
     this.change = new EventEmitter();
+    this.changeDetector = changeDetector;
   }
 
   selectTab(tab, notify = true) {
@@ -47,6 +52,7 @@ export class Tabs {
       prevActive.active = true;
     }
     notify && this.change.next(tabTitle);
+    this.changeDetector.markForCheck();
   }
 
   addTab(tab) {
@@ -55,6 +61,10 @@ export class Tabs {
     }
     this.tabs.push(tab);
   }
+
+  ngOnInit() {
+    if (this.selected) this.selected.subscribe(title => this.selectyByTitle(title));
+  }
 }
 
 @Component({