From b9bc3f2eab81babb2d0bb63322cb965870652d69 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Wed, 18 May 2016 16:59:54 +0300
Subject: [PATCH] Change detection optimizations

---
 lib/components/JsonSchema/json-schema.js       |  3 ++-
 lib/components/Method/method.js                |  3 ++-
 lib/components/MethodsList/methods-list.js     |  3 ++-
 lib/components/Redoc/redoc.js                  |  4 +++-
 .../RequestSamples/request-samples.html        |  2 +-
 .../RequestSamples/request-samples.js          | 15 ++++-----------
 lib/components/ResponsesList/responses-list.js |  3 ++-
 lib/components/SideMenu/side-menu.js           |  4 +++-
 lib/components/base.js                         |  8 +++++++-
 lib/shared/components/Tabs/tabs.js             | 18 ++++++++++++++----
 10 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/lib/components/JsonSchema/json-schema.js b/lib/components/JsonSchema/json-schema.js
index 2b399a10..c313c350 100644
--- a/lib/components/JsonSchema/json-schema.js
+++ b/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 {
diff --git a/lib/components/Method/method.js b/lib/components/Method/method.js
index 0070788c..9b2ce7fa 100644
--- a/lib/components/Method/method.js
+++ b/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) {
diff --git a/lib/components/MethodsList/methods-list.js b/lib/components/MethodsList/methods-list.js
index c9a55f3f..3c036b99 100644
--- a/lib/components/MethodsList/methods-list.js
+++ b/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 {
 
diff --git a/lib/components/Redoc/redoc.js b/lib/components/Redoc/redoc.js
index 76669ded..b7c43cb4 100644
--- a/lib/components/Redoc/redoc.js
+++ b/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]])
diff --git a/lib/components/RequestSamples/request-samples.html b/lib/components/RequestSamples/request-samples.html
index a11d9b1f..d1175c8c 100644
--- a/lib/components/RequestSamples/request-samples.html
+++ b/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>
diff --git a/lib/components/RequestSamples/request-samples.js b/lib/components/RequestSamples/request-samples.js
index 96168c0e..f31de1ac 100644
--- a/lib/components/RequestSamples/request-samples.js
+++ b/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');
diff --git a/lib/components/ResponsesList/responses-list.js b/lib/components/ResponsesList/responses-list.js
index 3830845c..473fae84 100644
--- a/lib/components/ResponsesList/responses-list.js
+++ b/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 {
diff --git a/lib/components/SideMenu/side-menu.js b/lib/components/SideMenu/side-menu.js
index af5ba920..9834f61b 100644
--- a/lib/components/SideMenu/side-menu.js
+++ b/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]])
diff --git a/lib/components/base.js b/lib/components/base.js
index 97a1e77c..30d8246d 100644
--- a/lib/components/base.js
+++ b/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;
   };
 }
diff --git a/lib/shared/components/Tabs/tabs.js b/lib/shared/components/Tabs/tabs.js
index ed6094de..5cf174ec 100644
--- a/lib/shared/components/Tabs/tabs.js
+++ b/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({