Cache same schema views

lib/components/JsonSchema/json-schema-lazy.js

@@ -5,10 +5,15 @@ import {CORE_DIRECTIVES} from 'angular2/common';
 import JsonSchema from './json-schema';
 import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
 import OptionsManager from '../../options';
+import SchemaManager from '../../utils/SchemaManager';
+
+
+var cache = {};
+
 
 @Component({
   selector: 'json-schema-lazy',
-  inputs: ['pointer']
+  inputs: ['pointer', 'auto']
 })
 @View({
   template: '',
@@ -21,6 +26,11 @@ export default class JsonSchemaLazy {
     this.dcl = dcl;
   }
 
+  normalizePointer() {
+    let schema = SchemaManager.instance().byPointer(this.pointer);
+    return schema && schema.$ref || this.pointer;
+  }
+
   load() {
     if (OptionsManager.instance().options.disableLazySchemas) return;
     if (this.loaded) return;
@@ -31,5 +41,43 @@ export default class JsonSchemaLazy {
     }
     this.loaded = true;
   }
+
+  // cache JsonSchema view
+  loadCached() {
+    this.pointer = this.normalizePointer(this.pointer);
+    if (cache[this.pointer]) {
+      cache[this.pointer].then((compRef) => {
+        setTimeout( ()=> {
+          let element = compRef.location.nativeElement;
+
+          // skip caching view with discriminator as it needs attached controller
+          if (element.querySelector('.discriminator')) {
+            this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => {
+              compRef.instance.pointer = this.pointer;
+              compRef.hostView.changeDetectorRef.markForCheck();
+            });
+            return;
+          }
+          insertAfter(element.cloneNode(true), this.elementRef.nativeElement);
+        } );
+      });
+    } else {
+      cache[this.pointer] = this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => {
+        compRef.instance.pointer = this.pointer;
+        compRef.hostView.changeDetectorRef.markForCheck();
+        return compRef;
+      });
+    }
+  }
+
+  ngAfterViewInit() {
+    if (!this.auto) return;
+    this.loadCached();
+  }
 }
+
+function insertAfter(newNode, referenceNode) {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
 JsonSchemaLazy.parameters = [[ElementRef], [DynamicComponentLoader]];

lib/components/JsonSchema/json-schema.js

@@ -87,7 +87,7 @@ export default class JsonSchema extends BaseComponent {
   adjustNameColumnWidth() {
     // TODO handle internal schemes differently
     let names = [].slice.call(this.element.querySelectorAll('.param-name-content'));
-    let widths = names.map(el => el.offsetWidth);
+    let widths = [144];//names.map(el => el.offsetWidth);
     let maxWidth = Math.max(...widths);
     if (!maxWidth) return;
     names.forEach(el => {
@@ -142,7 +142,14 @@ export default class JsonSchema extends BaseComponent {
   }
 
   ngAfterViewInit() {
-    this.adjustNameColumnWidth();
+    // adjust widht only on parent level
+    let el = this.element.parentElement;
+    while(el.tagName !== 'JSON-SCHEMA' && el.tagName !== 'REDOC') {
+      el = el.parentElement;
+    }
+    if (el.tagName === 'REDOC' ) {
+      this.adjustNameColumnWidth();
+    }
   }
 }
 JsonSchema.parameters = JsonSchema.parameters.concat([[ElementRef]]);

lib/components/JsonSchema/json-schema.scss

@@ -3,6 +3,9 @@
 /* styles for array-schema for array */
 $array-marker-font-sz: 12px;
 $array-marker-line-height: 1.5;
+:host {
+  display: block;
+}
 
 .params-wrap.params-array:before, .params-wrap.params-array:after {
   display: block;

lib/components/ParamsList/params-list.html

@@ -23,7 +23,7 @@
 
   <div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
   <div>
-    <json-schema pointer="{{data.bodyParam.pointer}}/schema">
-    </json-schema>
+    <json-schema-lazy [auto]="true" pointer="{{data.bodyParam.pointer}}/schema">
+    </json-schema-lazy>
   </div>
 </div>

lib/components/ParamsList/params-list.js

@@ -2,12 +2,13 @@
 
 import {RedocComponent, BaseComponent} from '../base';
 import JsonSchema from '../JsonSchema/json-schema';
+import JsonSchemaLazy from '../JsonSchema/json-schema-lazy';
 
 @RedocComponent({
   selector: 'params-list',
   templateUrl: './lib/components/ParamsList/params-list.html',
   styleUrls: ['./lib/components/ParamsList/params-list.css'],
-  directives: [JsonSchema]
+  directives: [JsonSchema, JsonSchemaLazy]
 })
 export default class ParamsList extends BaseComponent {
   constructor(schemaMgr) {

lib/components/Redoc/redoc.js

@@ -148,7 +148,7 @@ export default class Redoc extends BaseComponent {
       (appRef) => {
         Redoc.hideLoadingAnimation();
         Redoc.appRef = appRef;
-        redocEvents.bootstrapped.next();
+        setTimeout(() => redocEvents.bootstrapped.next());
         console.log('ReDoc bootstrapped!');
       },
       error => {
@@ -193,7 +193,3 @@ export default class Redoc extends BaseComponent {
   }
 }
 Redoc.parameters = Redoc.parameters.concat([[OptionsManager], [ElementRef], [BrowserDomAdapter]]);
-
-// TODO
-// this doesn't work in side-menu.js because of some circular references issue
-SideMenu.parameters = SideMenu.parameters.concat([[Redoc]]);