Merge branch 'master' into releases

build/prepare_deploy.sh

@@ -12,7 +12,7 @@ git checkout @{-1}
 cd -
 
 # build
-gulp build
+npm run build-dist
 cd demo
 cp -R ../dist/* ./dist/
 mkdir -p releases

build/tasks/build.js

@@ -11,25 +11,29 @@ var gulp = require('gulp');
 var sass = require('gulp-sass');
 var replace = require('gulp-replace');
 var rename = require('gulp-rename');
+var argv = require('yargs').argv;
 
 gulp.task('build', function (callback) {
+  if (argv.skipRebuild) {
+    console.log('>>> Rebuild skipped')
+    return callback();
+  }
   return runSequence(
     'clean',
-    'bundleProd',
-    callback
-  );
-});
-
-gulp.task('buildDev', function (callback) {
-  return runSequence(
-    'clean',
+    'concatPrism',
     'bundle',
+    'concatDeps',
     callback
   );
 });
 
-gulp.task('bundle', ['concatPrism', 'buildStatic', 'concatDeps']);
-gulp.task('bundleProd', ['bundle', 'buildStaticMin', 'concatDepsMin']);
+gulp.task('rebuild', function(done) {
+  return runSequence(
+    'bundle',
+    'concatDeps',
+    callback
+  );
+});
 
 gulp.task('inlineTemplates', ['sass'], function() {
   return gulp.src(paths.source, { base: './' })
@@ -38,20 +42,20 @@ gulp.task('inlineTemplates', ['sass'], function() {
     .pipe(gulp.dest(paths.tmp));
 });
 
-var JS_DEV_DEPS = [
+var JS_DEPS = argv.prod ? [
   'lib/utils/browser-update.js',
   'node_modules/zone.js/dist/zone.js',
   'node_modules/zone.js/dist/long-stack-trace-zone.js',
   'node_modules/reflect-metadata/Reflect.js',
   'node_modules/babel-polyfill/dist/polyfill.js'
-];
-
-var JS_DEV_DEPS_MIN = [
+] : [
   'lib/utils/browser-update.js',
   'node_modules/zone.js/dist/zone.min.js',
   'node_modules/reflect-metadata/Reflect.js',
   'node_modules/babel-polyfill/dist/polyfill.min.js'
-]
+];
+
+var outputFileName = paths.redocBuilt + (argv.prod ? '.min.js' : '.js');
 
 gulp.task('sass', function () {
   return gulp.src(paths.scss, { base: './' })
@@ -60,38 +64,22 @@ gulp.task('sass', function () {
 });
 
 // concatenate angular2 deps
-gulp.task('concatDeps', ['buildStatic'], function() {
-  return concatDeps(JS_DEV_DEPS, paths.redocBuilt + '.js');
-});
-
-gulp.task('concatDepsMin', ['buildStatic'], function() {
-  return concatDeps(JS_DEV_DEPS_MIN, paths.redocBuilt + '.min.js');
-});
-
-gulp.task('buildStatic', ['inlineTemplates'], function(cb) {
-  bundle(paths.redocBuilt + '.js', false, cb);
-});
-
-gulp.task('buildStaticMin', ['inlineTemplates'], function(cb) {
-  bundle(paths.redocBuilt + '.min.js', true, cb);
-});
-
-function concatDeps(deps, file) {
-  return gulp.src(deps.concat([file]))
+gulp.task('concatDeps', function() {
+  return gulp.src(JS_DEPS.concat([outputFileName]))
     .pipe(sourcemaps.init({loadMaps: true}))
-  .pipe(concat(file))
+    .pipe(concat(outputFileName))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest('.'))
-}
+});
 
-function bundle(outputFile, minify, cb) {
+gulp.task('bundle', ['inlineTemplates'], function bundle(cb) {
   fs.existsSync('dist') || fs.mkdirSync('dist');
   var builder = new Builder('./', 'system.config.js');
 
   builder
     .buildStatic(path.join(paths.tmp, paths.sourceEntryPoint),
-      outputFile,
-      { format:'umd', sourceMaps: true, lowResSourceMaps: true, minify: minify }
+      outputFileName,
+      { format:'umd', sourceMaps: !argv.prod, lowResSourceMaps: true, minify: argv.prod }
     )
     .then(function() {
       // wait some time to allow flush
@@ -100,7 +88,7 @@ function bundle(outputFile, minify, cb) {
     .catch(function(err) {
       cb(new Error(err));
     });
-}
+});
 
 gulp.task('concatPrism', function() {
   require('../../system.config.js');
@@ -129,7 +117,7 @@ gulp.task('concatPrism', function() {
     'components/prism-scala.js'
   ].map(file => path.join(prismFolder, file));
 
-  gulp.src(prismFiles)
+  return gulp.src(prismFiles)
     .pipe(concat(path.join(paths.tmp, 'prismjs-bundle.js')))
     .pipe(gulp.dest('.'))
 });

build/tasks/e2e.js

@@ -19,7 +19,7 @@ gulp.task('test-server', function (done) {
 });
 
 
-gulp.task('e2e', ['bundleProd', 'test-server'], function(done) {
+gulp.task('e2e', ['build', 'test-server'], function(done) {
   gulp.src(['tests/e2e/**/*.js'], { read:false })
   		.pipe(gp.protractor({
   			configFile: './protractor.conf.js'

build/tasks/watch.js

@@ -6,9 +6,9 @@ function changed(event) {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 }
 
-gulp.task('watch', ['buildDev'], function () {
-  gulp.watch([ paths.source ], [ 'bundle', browserSync.reload ]).on('change', changed);
-  gulp.watch([ paths.html ], [ 'bundle', browserSync.reload]).on('change', changed);
-  gulp.watch([ paths.scss ], [ 'bundle', browserSync.reload]).on('change', changed);
+gulp.task('watch', ['build'], function () {
+  gulp.watch([ paths.source ], [ 'rebuild', browserSync.reload ]).on('change', changed);
+  gulp.watch([ paths.html ], [ 'rebuild', browserSync.reload]).on('change', changed);
+  gulp.watch([ paths.scss ], [ 'rebuild', browserSync.reload]).on('change', changed);
   gulp.watch([ paths.demo ], [ '', browserSync.reload ]).on('change', changed);
 });

lib/components/JsonSchema/json-schema.html

@@ -35,6 +35,7 @@
           <span class="param-range" *ngIf="prop._range"> {{prop._range}} </span>
           </span>
           <span *ngIf="prop.required" class="param-required">Required</span>
+          <div *ngIf="prop.default">Default: {{prop.default | json}}</div>
           <div *ngIf="prop.enum && !prop.isDiscriminator" class="param-enum">
             <span *ngFor="let enumItem of prop.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
           </div>

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/Method/method.scss

@@ -22,6 +22,8 @@ responses-list, params-list {
   background-color: darken($black, 2%);
   display: block;
   font-weight: $light;
+  white-space: nowrap;
+  overflow-x: auto;
 }
 
 .method-endpoint > h5 {

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/ParamsList/params-list.html

@@ -15,6 +15,7 @@
             <span class="param-type {{param.type}}" [ngClass]="{'with-hint': param._displayTypeHint}"
             title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
             <span *ngIf="param.required" class="param-required">Required</span>
+            <div class="default" *ngIf="param.default">Default: {{param.default | json}}</div>
             <div *ngIf="param.enum" class="param-enum">
               <span *ngFor="let enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
             </div>

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.html

@@ -8,9 +8,13 @@
     <div class="header" *ngFor="let header of response.headers">
       <div class="header-name"> {{header.name}} </div>
       <div class="header-type"> {{header.type}} </div>
+      <div *ngIf="header.default" class="header-default"> Default: {{header.default}} </div>
       <div class="header-description" innerHtml="{{header.description | marked}}"> </div>
     </div>
   </div>
+  <header *ngIf="response.headers">
+    Response Schema
+  </header>
   <json-schema *ngIf="response.schema && options.disableLazySchemas" class="schema type" pointer="{{response.pointer}}/schema">
   </json-schema>
   <json-schema-lazy #lazySchema pointer="{{response.schema ? response.pointer + '/schema' : null}}">

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/ResponsesList/responses-list.scss

@@ -28,6 +28,11 @@ header {
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 15px;
+
+  &:not(:first-child) {
+    margin-top: 15px;
+    margin-bottom: 0;
+  }
 }
 
 .header {

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]])
@@ -31,10 +33,10 @@ export class SideMenu extends BaseComponent {
     this.options = optionsService.options;
     this.detectorRef = detectorRef;
 
-    this.menuService.changed.subscribe((cat, item) => this.changed(cat, item));
+    this.menuService.changed.subscribe((evt) => this.changed(evt));
   }
 
-  changed(cat, item) {
+  changed({cat, item}) {
     this.activeCatCaption = cat.name || '';
     this.activeItemCaption = item && item.summary || '';
 
@@ -54,11 +56,10 @@ export class SideMenu extends BaseComponent {
     this.$mobileNav = this.dom.querySelector(this.$element, '.mobile-nav');
     this.$resourcesNav = this.dom.querySelector(this.$element, '#resources-nav');
 
-    //decorate option.scrollYOffset to account mobile nav
-    var origOffset = this.options.scrollYOffset;
-    this.options.scrollYOffset = () => {
+    //decorate scrollYOffset to account mobile nav
+    this.scrollService.scrollYOffset = () => {
       let mobileNavOffset = this.$mobileNav.clientHeight;
-      return origOffset() + mobileNavOffset;
+      return this.options.scrollYOffset() + mobileNavOffset;
     };
   }
 
@@ -73,12 +74,14 @@ export class SideMenu extends BaseComponent {
 
   toggleMobileNav() {
     let dom = this.dom;
-    let $overflowParent = (this.$scrollParent === global) ? dom.defaultDoc().body : this.$scrollParent;
+    let $overflowParent = (this.options.$scrollParent === global) ? dom.defaultDoc().body
+      : this.$scrollParent.$scrollParent;
     if (dom.hasStyle(this.$resourcesNav, 'height')) {
       dom.removeStyle(this.$resourcesNav, 'height');
       dom.removeStyle($overflowParent, 'overflow-y');
     } else {
-      let viewportHeight = this.$scrollParent.innerHeight || this.$scrollParent.clientHeight;
+      let viewportHeight = this.options.$scrollParent.innerHeight
+       || this.options.$scrollParent.clientHeight;
       let height = viewportHeight - this.$mobileNav.getBoundingClientRect().bottom;
       dom.setStyle($overflowParent, 'overflow-y', 'hidden');
       dom.setStyle(this.$resourcesNav, 'height', height + 'px');

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/services/menu.service.js

@@ -90,7 +90,7 @@ export class MenuService {
       this.activeMethodPtr = currentItem.pointer;
     }
 
-    this.changed.next(menu[catIdx], currentItem);
+    this.changed.next({cat: menu[catIdx], item: currentItem});
   }
 
   _calcActiveIndexes(offset) {

lib/shared/components/Tabs/tabs.js

@@ -2,10 +2,12 @@
 
 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({

package.json

@@ -1,7 +1,7 @@
 {
   "name": "redoc",
   "description": "Swagger-generated API Reference Documentation",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/Rebilly/ReDoc"
@@ -11,10 +11,10 @@
     "test": "gulp lint && ./build/run_tests.sh",
     "jspm-install": "jspm install",
     "start": "gulp serve",
-    "build-dist": "gulp build",
+    "build-dist": "gulp build --prod",
     "branch-release": "git reset --hard && branch-release",
     "unit": "gulp test",
-    "e2e": "gulp e2e",
+    "e2e": "gulp e2e --prod",
     "deploy": "build/prepare_deploy.sh && deploy-to-gh-pages demo"
   },
   "keywords": [
@@ -114,6 +114,7 @@
     "sinon": "^1.17.2",
     "systemjs-builder": "^0.15.16",
     "vinyl-paths": "^2.0.0",
+    "yargs": "^4.7.1",
     "zone.js": "^0.6.12"
   }
 }

tests/e2e/redoc.spec.js

@@ -43,12 +43,39 @@ describe('Scroll sync', () => {
     fixFFTest(done);
   });
 
-  it('should update active menu entries on page scroll', () => {
-    scrollToEl('[tag="store"]').then(function() {
+  it('should update active menu entries on page scroll forwards', () => {
+    scrollToEl('[tag="store"]').then(() => {
       expect($('.menu-cat-header.active').getInnerHtml()).toContain('store');
       expect($('.selected-tag').getInnerHtml()).toContain('store');
     });
   });
+
+  it('should update active menu entries on page scroll backwards', () => {
+    scrollToEl('[operation-id="getPetById"]').then(() => {
+      expect($('.menu-cat-header.active').getInnerHtml()).toContain('pet');
+      expect($('.selected-tag').getInnerHtml()).toContain('pet');
+      expect($('.menu-cat li.active').getInnerHtml()).toContain('Find pet by ID');
+      expect($('.selected-endpoint').getInnerHtml()).toContain('Find pet by ID');
+    });
+  });
+});
+
+describe('Language tabs sync', () => {
+  let specUrl = URL;
+
+  beforeEach((done) => {
+    browser.get(specUrl);
+    fixFFTest(done);
+  });
+
+  it('should sync language tabs', () => {
+    var $item = $$('[operation-id="addPet"] tabs > ul > li').last();
+    // check if correct item
+    expect($item.getText()).toContain('PHP');
+    $item.click().then(() => {
+      expect($('[operation-id="updatePet"] li.active').getText()).toContain('PHP');
+    });
+  });
 });
 
 if (process.env.JOB === 'e2e-guru') {