From c1f1944caeba84f48a5fb20c1cec5a8df93ea08f Mon Sep 17 00:00:00 2001 From: amanganiello Date: Thu, 22 Sep 2016 09:13:29 +0200 Subject: [PATCH 01/26] fix issue #116 --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 63ef580d..84d44767 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ Redoc.init('http://petstore.swagger.io/v2/swagger.json', { ```bash npm run build:sass ``` -- _(optional)_ Replace `demo/swagger.json` with your own schema +- _(optional)_ Replace `demo/swagger.yaml` with your own schema - Start the server `npm start` - Open `http://localhost:9000` diff --git a/package.json b/package.json index b803e2e9..384826a8 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "tslint": "^3.15.0-dev.0", "tslint-stylish": "^2.1.0-beta", "typescript": "^2.0.2", - "webpack": "^2.1.0-beta.21", + "webpack": "^2.1.0-beta.22", "webpack-dev-server": "^2.1.0-beta.2" }, "dependencies": { From 0c7357ac130fb9cc01f51717663e7df5e101500d Mon Sep 17 00:00:00 2001 From: amanganiello Date: Thu, 22 Sep 2016 09:57:44 +0200 Subject: [PATCH 02/26] test linux fix issue #116 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 384826a8..8b804226 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "build:prod": "npm run build:sass && npm run ngc && npm run webpack:prod", "build-dist": "npm run build:prod", "stats": "webpack --config build/webpack.prod.js --json > stats.json", - "start": "webpack-dev-server --config build/webpack.dev.js --content-base demo", + "start": "npm install webpack@2.1.0-beta.22 --save-dev && webpack-dev-server --config build/webpack.dev.js --content-base demo", "e2e-server": "http-server -p 3000 tests/e2e", "e2e-copy": "cp dist/redoc.min.js tests/e2e/", "webdriver": "webdriver-manager update", From 221fd7bf7b295f01c37f7f7cf2173725ac8696ae Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 18 Oct 2016 23:39:43 +0300 Subject: [PATCH 03/26] separate RedocModule from AppModule --- lib/app.module.ts | 13 +++++++++++++ lib/bootstrap.dev.ts | 4 ++-- lib/bootstrap.ts | 4 ++-- lib/redoc.module.ts | 4 ++-- 4 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 lib/app.module.ts diff --git a/lib/app.module.ts b/lib/app.module.ts new file mode 100644 index 00000000..37ee2c5a --- /dev/null +++ b/lib/app.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { RedocModule } from './redoc.module'; +import { Redoc } from './components/index'; + +@NgModule({ + imports: [ BrowserModule, RedocModule ], + bootstrap: [ Redoc ], + exports: [ Redoc ] +}) +export class AppModule { +} diff --git a/lib/bootstrap.dev.ts b/lib/bootstrap.dev.ts index f826b733..296618d7 100644 --- a/lib/bootstrap.dev.ts +++ b/lib/bootstrap.dev.ts @@ -1,6 +1,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { RedocModule } from './redoc.module'; +import { AppModule } from './app.module'; export function bootstrapRedoc() { - return platformBrowserDynamic().bootstrapModule(RedocModule); + return platformBrowserDynamic().bootstrapModule(AppModule); } diff --git a/lib/bootstrap.ts b/lib/bootstrap.ts index d7439b26..c55ccecb 100644 --- a/lib/bootstrap.ts +++ b/lib/bootstrap.ts @@ -1,6 +1,6 @@ import { platformBrowser } from '@angular/platform-browser'; -import { RedocModuleNgFactory } from './redoc.module.ngfactory'; +import { AppModuleNgFactory } from './app.module.ngfactory'; export function bootstrapRedoc() { - return platformBrowser().bootstrapModuleFactory(RedocModuleNgFactory); + return platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); } diff --git a/lib/redoc.module.ts b/lib/redoc.module.ts index 98f15729..a29e0951 100644 --- a/lib/redoc.module.ts +++ b/lib/redoc.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { CommonModule } from '@angular/common'; import { Redoc, REDOC_DIRECTIVES } from './components/index'; import { REDOC_COMMON_DIRECTIVES } from './shared/components/index'; @@ -10,7 +10,7 @@ import { OptionsService, RedocEventsService, MenuService, import { SpecManager } from './utils/SpecManager'; @NgModule({ - imports: [ BrowserModule ], + imports: [ CommonModule ], declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES], bootstrap: [ Redoc ], providers: [ From 17e7bf9fd8898860f7d705a1fcbc60aa1e610c2e Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 23 Oct 2016 20:18:42 +0300 Subject: [PATCH 04/26] Refactor + minor fixes/optimizations --- lib/components/ApiInfo/api-info.spec.ts | 2 +- lib/components/ApiInfo/api-info.ts | 2 +- lib/components/ApiLogo/api-logo.spec.ts | 2 +- lib/components/JsonSchema/json-schema-lazy.ts | 26 ++-- lib/components/JsonSchema/json-schema.spec.ts | 2 +- lib/components/Method/method.spec.ts | 2 +- .../MethodsList/methods-list.spec.ts | 2 +- lib/components/Redoc/redoc.html | 6 +- lib/components/Redoc/redoc.spec.ts | 119 +----------------- lib/components/Redoc/redoc.ts | 96 +++++++------- .../RequestSamples/request-samples.ts | 15 +-- .../security-definitions.html | 2 + .../security-definitions.scss | 28 +++++ .../security-definitions.ts | 25 ++++ lib/components/SideMenu/side-menu.spec.ts | 2 +- lib/components/SideMenu/side-menu.ts | 1 - lib/components/base.spec.ts | 2 +- lib/components/base.ts | 2 +- lib/components/index.ts | 5 +- lib/index.ts | 4 +- lib/redoc.module.ts | 17 +-- lib/services/app-state.service.ts | 11 ++ lib/services/clipboard.service.ts | 3 +- lib/services/events.service.ts | 8 -- lib/services/hash.service.spec.ts | 21 ++-- lib/services/hash.service.ts | 39 +++--- lib/services/index.ts | 2 +- lib/services/menu.service.spec.ts | 17 +-- lib/services/menu.service.ts | 4 +- lib/services/schema-helper.serivce.spec.ts | 2 +- lib/services/schema-helper.service.ts | 2 +- .../schema-normalizer.service.spec.ts | 2 +- lib/services/schema-normalizer.service.ts | 2 +- lib/services/scroll.service.ts | 6 +- lib/utils/browser-update.js | 10 -- lib/utils/custom-error-handler.ts | 12 ++ lib/utils/helpers.js | 103 --------------- lib/utils/index.ts | 1 + lib/utils/{SpecManager.ts => spec-manager.ts} | 22 +++- tests/spec-bundle.js | 11 +- tests/unit/SpecManager.spec.ts | 2 +- 41 files changed, 251 insertions(+), 391 deletions(-) create mode 100644 lib/components/SecurityDefinitions/security-definitions.html create mode 100644 lib/components/SecurityDefinitions/security-definitions.scss create mode 100644 lib/components/SecurityDefinitions/security-definitions.ts create mode 100644 lib/services/app-state.service.ts delete mode 100644 lib/services/events.service.ts delete mode 100644 lib/utils/browser-update.js create mode 100644 lib/utils/custom-error-handler.ts delete mode 100644 lib/utils/helpers.js create mode 100644 lib/utils/index.ts rename lib/utils/{SpecManager.ts => spec-manager.ts} (91%) diff --git a/lib/components/ApiInfo/api-info.spec.ts b/lib/components/ApiInfo/api-info.spec.ts index 7f5bf1c8..4d0e6612 100644 --- a/lib/components/ApiInfo/api-info.spec.ts +++ b/lib/components/ApiInfo/api-info.spec.ts @@ -11,7 +11,7 @@ import { } from '@angular/core/testing'; import { ApiInfo } from './api-info'; -import { SpecManager } from '../../utils/SpecManager'; +import { SpecManager } from '../../utils/spec-manager'; describe('Redoc components', () => { describe('ApiInfo Component', () => { diff --git a/lib/components/ApiInfo/api-info.ts b/lib/components/ApiInfo/api-info.ts index 9847210a..00a301c6 100644 --- a/lib/components/ApiInfo/api-info.ts +++ b/lib/components/ApiInfo/api-info.ts @@ -12,7 +12,7 @@ import { OptionsService, MenuService } from '../../services/index'; export class ApiInfo extends BaseComponent implements OnInit { info: any = {}; specUrl: String; - constructor(specMgr:SpecManager, private optionsService:OptionsService, private menuServ: MenuService) { + constructor(specMgr:SpecManager, private optionsService: OptionsService) { super(specMgr); } diff --git a/lib/components/ApiLogo/api-logo.spec.ts b/lib/components/ApiLogo/api-logo.spec.ts index e4ba00c0..5ef98c1f 100644 --- a/lib/components/ApiLogo/api-logo.spec.ts +++ b/lib/components/ApiLogo/api-logo.spec.ts @@ -10,7 +10,7 @@ import { } from '@angular/core/testing'; import { ApiLogo } from './api-logo'; -import { SpecManager } from '../../utils/SpecManager'; +import { SpecManager } from '../../utils/spec-manager'; describe('Redoc components', () => { diff --git a/lib/components/JsonSchema/json-schema-lazy.ts b/lib/components/JsonSchema/json-schema-lazy.ts index 80dc3f63..4cfe9143 100644 --- a/lib/components/JsonSchema/json-schema-lazy.ts +++ b/lib/components/JsonSchema/json-schema-lazy.ts @@ -5,7 +5,7 @@ import { Component, ElementRef, ViewContainerRef, OnDestroy, Input, import { JsonSchema } from './json-schema'; import { OptionsService } from '../../services/options.service'; -import { SpecManager } from '../../utils/SpecManager'; +import { SpecManager } from '../../utils/spec-manager'; var cache = {}; @@ -38,7 +38,7 @@ export class JsonSchemaLazy implements OnDestroy, AfterViewInit { var componentFactory = this.resolver.resolveComponentFactory(JsonSchema); let contextInjector = this.location.parentInjector; let compRef = this.location.createComponent(componentFactory, null, contextInjector, null); - this.initComponent(compRef.instance); + this.projectComponentInputs(compRef.instance); this._renderer.setElementAttribute(compRef.location.nativeElement, 'class', this.location.element.nativeElement.className); compRef.changeDetectorRef.detectChanges(); this.loaded = true; @@ -58,24 +58,22 @@ export class JsonSchemaLazy implements OnDestroy, AfterViewInit { this.pointer = this.normalizePointer(); if (cache[this.pointer]) { let compRef = cache[this.pointer]; - setTimeout( ()=> { - let $element = compRef.location.nativeElement; + let $element = compRef.location.nativeElement; - // skip caching view with descendant schemas - // as it needs attached controller - if (!this.disableLazy && (compRef.instance.hasDescendants || compRef.instance._hasSubSchemas)) { - this._loadAfterSelf(); - return; - } - insertAfter($element.cloneNode(true), this.elementRef.nativeElement); - this.loaded = true; - }); + // skip caching view with descendant schemas + // as it needs attached controller + if (!this.disableLazy && (compRef.instance.hasDescendants || compRef.instance._hasSubSchemas)) { + this._loadAfterSelf(); + return; + } + insertAfter($element.cloneNode(true), this.elementRef.nativeElement); + this.loaded = true; } else { cache[this.pointer] = this._loadAfterSelf(); } } - initComponent(instance:JsonSchema) { + projectComponentInputs(instance:JsonSchema) { Object.assign(instance, this); } diff --git a/lib/components/JsonSchema/json-schema.spec.ts b/lib/components/JsonSchema/json-schema.spec.ts index d2c8f697..53b77cad 100644 --- a/lib/components/JsonSchema/json-schema.spec.ts +++ b/lib/components/JsonSchema/json-schema.spec.ts @@ -10,7 +10,7 @@ import { getChildDebugElement } from '../../../tests/helpers'; import { JsonSchema } from './json-schema'; -import { SpecManager } from '../../utils/SpecManager';; +import { SpecManager } from '../../utils/spec-manager';; describe('Redoc components', () => { beforeEach(() => { diff --git a/lib/components/Method/method.spec.ts b/lib/components/Method/method.spec.ts index c5e80d15..c35508a0 100644 --- a/lib/components/Method/method.spec.ts +++ b/lib/components/Method/method.spec.ts @@ -10,7 +10,7 @@ import { import { getChildDebugElement } from '../../../tests/helpers'; import { Method } from './method'; -import { SpecManager } from '../../utils/SpecManager';; +import { SpecManager } from '../../utils/spec-manager';; describe('Redoc components', () => { beforeEach(() => { diff --git a/lib/components/MethodsList/methods-list.spec.ts b/lib/components/MethodsList/methods-list.spec.ts index e552d2d2..ca59e157 100644 --- a/lib/components/MethodsList/methods-list.spec.ts +++ b/lib/components/MethodsList/methods-list.spec.ts @@ -11,7 +11,7 @@ import { getChildDebugElement } from '../../../tests/helpers'; import { MethodsList } from './methods-list'; -import { SpecManager } from '../../utils/SpecManager'; +import { SpecManager } from '../../utils/spec-manager'; describe('Redoc components', () => { beforeEach(() => { diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 8df000b0..11e8c3d7 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -1,4 +1,8 @@ -
+
+

Oops... ReDoc failed to render this spec

+
{{_error.message}}
+
+
diff --git a/lib/components/Redoc/redoc.spec.ts b/lib/components/Redoc/redoc.spec.ts index 6ef20074..01c6e80d 100644 --- a/lib/components/Redoc/redoc.spec.ts +++ b/lib/components/Redoc/redoc.spec.ts @@ -11,7 +11,7 @@ import { import { TestBed } from '@angular/core/testing'; import { Redoc } from './redoc'; -import { SpecManager } from '../../utils/SpecManager'; +import { SpecManager } from '../../utils/spec-manager'; import { OptionsService } from '../../services/index'; let optsMgr:OptionsService; @@ -46,123 +46,6 @@ describe('Redoc components', () => { fixture.destroy(); }); }); - - // describe('Redoc init', () => { - // let dom = new BrowserDomAdapter(); - // let elem; - // beforeEach(() => { - // elem = dom.createElement('redoc'); - // dom.defaultDoc().body.appendChild(elem); - // }); - // - // afterEach(() => { - // dom.defaultDoc().body.removeChild(elem); - // }); - // - // it('should return promise', () => { - // let res = Redoc.init().catch(() => {/**/}); - // res.should.be.instanceof(Promise); - // }); - // - // it('should hide loading animation and display message in case of error', async(() => { - // spyOn(Redoc, 'hideLoadingAnimation').and.callThrough(); - // spyOn(Redoc, 'displayError').and.callThrough(); - // let res = Redoc.init(); - // return res.catch(() => { - // expect(Redoc.hideLoadingAnimation).toHaveBeenCalled(); - // expect(Redoc.displayError).toHaveBeenCalled(); - // }); - // })); - // - // //skip because of PhantomJS crashes on this testcase - // xit('should init redoc', (done) => { - // var node = document.createElement('redoc'); - // document.body.appendChild(node); - // let res = Redoc.init('/tests/schemas/extended-petstore.yml'); - // res.then(() => { done(); }, () => { - // done.fail('Error handler should not been called'); - // }); - // }); - // }); - // - // describe('Redoc destroy', () => { - // let builder; - // let fixture; - // let element; - // let dom; - // let destroySpy; - // - // beforeEach(async(inject([SpecManager, OptionsService, BrowserDomAdapter], - // ( specMgr, opts, _dom) => { - // - // optsMgr = opts; - // dom = _dom; - // return specMgr.load('/tests/schemas/extended-petstore.yml'); - // }))); - // - // beforeEach(() => { - // fixture = TestBed.createComponent(TestAppComponent); - // element = getChildDebugElement(fixture.debugElement, 'methods-list').nativeElement; - // destroySpy = jasmine.createSpy('spy'); - // Redoc.appRef = >{ - // destroy: destroySpy - // }; - // fixture.detectChanges(); - // }); - // - // afterEach(()=> { - // fixture.destroy(); - // Redoc.appRef = null; - // }); - // - // it('should call componentRef.destroy', () => { - // Redoc.destroy(); - // expect(destroySpy).toHaveBeenCalled(); - // }); - // - // it('should create new host element', () => { - // element.parentElement.removeChild(element); - // Redoc.destroy(); - // expect(dom.query('redoc')).not.toBeNull(); - // dom.query('redoc').should.not.be.equal(element); - // }); - // - // it('should set to null appRef', () => { - // Redoc.destroy(); - // expect(Redoc.appRef).toBeNull(); - // }); - // }); - // - // describe('Redoc autoInit', () => { - // const testURL = 'testurl'; - // let dom = new BrowserDomAdapter(); - // //let redocInitSpy; - // let elem: HTMLElement; - // - // beforeEach(() => { - // spyOn(Redoc, 'init').and.stub(); - // elem = dom.createElement('redoc'); - // dom.defaultDoc().body.appendChild(elem); - // dom.setAttribute(elem, 'spec-url', testURL); - // }); - // - // it('should call Redoc.init with url from param spec-url', () => { - // Redoc.autoInit(); - // expect(Redoc.init).toHaveBeenCalled(); - // expect((Redoc.init).calls.argsFor(0)).toEqual([testURL]); - // }); - // - // it('should not call Redoc.init when spec-url param is not provided', () => { - // dom.removeAttribute(elem, 'spec-url'); - // Redoc.autoInit(); - // expect(Redoc.init).not.toHaveBeenCalled(); - // }); - // - // afterEach(() => { - // (Redoc.init).and.callThrough(); - // dom.defaultDoc().body.removeChild(elem); - // }); - // }); }); /** Test component that contains a Redoc. */ diff --git a/lib/components/Redoc/redoc.ts b/lib/components/Redoc/redoc.ts index 2c659864..fdceb28e 100644 --- a/lib/components/Redoc/redoc.ts +++ b/lib/components/Redoc/redoc.ts @@ -1,15 +1,23 @@ 'use strict'; -import { ElementRef, ComponentRef, ChangeDetectorRef, Input, - Component, OnInit, ChangeDetectionStrategy} from '@angular/core'; +import { ElementRef, + ComponentRef, + ChangeDetectorRef, + Input, + Component, + OnInit, + ChangeDetectionStrategy, + HostBinding +} from '@angular/core'; import { BrowserDomAdapter as DOM } from '../../utils/browser-adapter'; import { BaseComponent } from '../base'; import * as detectScollParent from 'scrollparent'; -import { SpecManager } from '../../utils/SpecManager'; -import { OptionsService, RedocEventsService } from '../../services/index'; +import { SpecManager } from '../../utils/spec-manager'; +import { OptionsService, Hash, MenuService, AppStateService } from '../../services/index'; +import { CustomErrorHandler } from '../../utils/'; @Component({ selector: 'redoc', @@ -18,45 +26,29 @@ import { OptionsService, RedocEventsService } from '../../services/index'; changeDetection: ChangeDetectionStrategy.OnPush }) export class Redoc extends BaseComponent implements OnInit { - static appRef: ComponentRef; static _preOptions: any; - specLoaded: boolean; - - public options: any; private element: any; + error: any; + specLoaded: boolean; + options: any; + @Input() specUrl: string; + @HostBinding('class.loading') specLoading: boolean = false; + @HostBinding('class.loading-remove') specLoadingRemove: boolean = false; - // TODO: refactor in separate component/service - showLoadingAnimation() { - DOM.addClass(this.element, 'loading'); - } - - hideLoadingAnimation() { - DOM.addClass(this.element, 'loading-remove'); - setTimeout(() => { - DOM.removeClass(this.element, 'loading-remove'); - DOM.removeClass(this.element, 'loading'); - }, 400); - } - - static displayError(err, elem?) { - let redocEl = elem || DOM.query('redoc'); - if (!redocEl) return; - let heading = 'Oops... ReDoc failed to render this spec'; - let details = err.message; - let erroHtml = `
-

${heading}

-
${details}
`; - redocEl.innerHTML = erroHtml; - } - - constructor(specMgr: SpecManager, optionsMgr:OptionsService, elementRef:ElementRef, - public events:RedocEventsService, private changeDetector: ChangeDetectorRef) { + constructor( + specMgr: SpecManager, + optionsMgr: OptionsService, + elementRef: ElementRef, + private changeDetector: ChangeDetectorRef, + private appState: AppStateService + ) { super(specMgr); // merge options passed before init optionsMgr.options = Redoc._preOptions || {}; + this.element = elementRef.nativeElement; //parse options (top level component doesn't support inputs) optionsMgr.parseOptions( this.element ); @@ -66,22 +58,34 @@ export class Redoc extends BaseComponent implements OnInit { this.options = optionsMgr.options; } + hideLoadingAnimation() { + this.specLoadingRemove = true; + setTimeout(() => { + this.specLoadingRemove = true; + this.specLoading = false; + }, 400); + } + load() { - this.showLoadingAnimation(); - SpecManager.instance().load(this.options.specUrl).then(() => { - this.specLoaded = true; - this.changeDetector.markForCheck(); - //this.changeDetector.detectChanges(); - this.events.bootstrapped.next({}); - this.hideLoadingAnimation(); - }).catch((err) => { - this.hideLoadingAnimation(); - Redoc.displayError(err, this.element); - throw err; - }) + this.specMgr.load(this.options.specUrl); + this.specMgr.spec.subscribe((spec) => { + if (!spec) { + this.specLoading = true; + this.specLoaded = false; + } else { + this.specLoaded = true; + this.hideLoadingAnimation(); + this.changeDetector.markForCheck(); + } + }); } ngOnInit() { + this.appState.error.subscribe(_err => { + this.error = _err; + this.changeDetector.detectChanges(); + }) + if (this.specUrl) { this.options.specUrl = this.specUrl; } diff --git a/lib/components/RequestSamples/request-samples.ts b/lib/components/RequestSamples/request-samples.ts index 14651d54..049e536b 100644 --- a/lib/components/RequestSamples/request-samples.ts +++ b/lib/components/RequestSamples/request-samples.ts @@ -1,12 +1,14 @@ 'use strict'; -import { Component, ViewChildren, QueryList, EventEmitter, Input, +import { Component, ViewChildren, QueryList, Input, ChangeDetectionStrategy, OnInit, HostBinding } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; + import { BaseComponent, SpecManager } from '../base'; import JsonPointer from '../../utils/JsonPointer'; import { Tabs } from '../../shared/components/index'; -import { RedocEventsService } from '../../services/index'; +import { AppStateService } from '../../services/index'; @Component({ selector: 'request-samples', @@ -21,18 +23,17 @@ export class RequestSamples extends BaseComponent implements OnInit { @HostBinding('attr.hidden') hidden; childTabs: Tabs; - selectedLang: EventEmitter; + selectedLang: Subject; samples: Array; - constructor(specMgr:SpecManager, public events:RedocEventsService) { + constructor(specMgr:SpecManager, public appState:AppStateService) { super(specMgr); - this.selectedLang = this.events.samplesLanguageChanged; + this.selectedLang = this.appState.samplesLanguage; } - changeLangNotify(lang) { - this.events.samplesLanguageChanged.next(lang); + this.selectedLang.next(lang); } init() { diff --git a/lib/components/SecurityDefinitions/security-definitions.html b/lib/components/SecurityDefinitions/security-definitions.html new file mode 100644 index 00000000..1a1955ad --- /dev/null +++ b/lib/components/SecurityDefinitions/security-definitions.html @@ -0,0 +1,2 @@ +

Hello world

+

{{message}} {{pointer}}

diff --git a/lib/components/SecurityDefinitions/security-definitions.scss b/lib/components/SecurityDefinitions/security-definitions.scss new file mode 100644 index 00000000..0c7c1a81 --- /dev/null +++ b/lib/components/SecurityDefinitions/security-definitions.scss @@ -0,0 +1,28 @@ +@import '../../shared/styles/variables'; + +.api-info-header { + font-weight: normal; +} + +:host > div { + width: 60%; + padding: 40px; + box-sizing: border-box; + + @media (max-width: $right-panel-squash-breakpoint) { + width: 100%; + } +} + +a.openapi-button { + padding: 3px 8px 4px 8px; + color: $primary-color; + border: 1px solid $primary-color; + margin-left: 0.5em; + font-weight: normal; +} + +:host /deep/ [section] { + padding-top: 60px; + margin-top: 20px; +} diff --git a/lib/components/SecurityDefinitions/security-definitions.ts b/lib/components/SecurityDefinitions/security-definitions.ts new file mode 100644 index 00000000..401bb06e --- /dev/null +++ b/lib/components/SecurityDefinitions/security-definitions.ts @@ -0,0 +1,25 @@ +'use strict'; +import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'; +import { SpecManager, BaseComponent } from '../base'; + +@Component({ + selector: 'security-definitions', + styleUrls: ['./security-definitions.css'], + templateUrl: './security-definitions.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SecurityDefinitions extends BaseComponent implements OnInit { + info: any = {}; + specUrl: String; + message: string = 'Roman'; + constructor(specMgr:SpecManager) { + super(specMgr); + } + + init() { + } + + ngOnInit() { + this.preinit(); + } +} diff --git a/lib/components/SideMenu/side-menu.spec.ts b/lib/components/SideMenu/side-menu.spec.ts index 75b7e64c..f4707689 100644 --- a/lib/components/SideMenu/side-menu.spec.ts +++ b/lib/components/SideMenu/side-menu.spec.ts @@ -13,7 +13,7 @@ import { TestBed } from '@angular/core/testing'; import { MethodsList, SideMenu } from '../index'; -import { SpecManager } from '../../utils/SpecManager'; +import { SpecManager } from '../../utils/spec-manager'; let testOptions; diff --git a/lib/components/SideMenu/side-menu.ts b/lib/components/SideMenu/side-menu.ts index 0b9c23cf..8def56d0 100644 --- a/lib/components/SideMenu/side-menu.ts +++ b/lib/components/SideMenu/side-menu.ts @@ -103,7 +103,6 @@ export class SideMenu extends BaseComponent implements OnInit { destroy() { this.scrollService.unbind(); - this.hash.unbind(); } ngOnInit() { diff --git a/lib/components/base.spec.ts b/lib/components/base.spec.ts index 2cc0599b..efc0687f 100644 --- a/lib/components/base.spec.ts +++ b/lib/components/base.spec.ts @@ -1,6 +1,6 @@ 'use strict'; -import { SpecManager } from '../utils/SpecManager'; +import { SpecManager } from '../utils/spec-manager'; import { BaseComponent } from '../components/base'; describe('Redoc components', () => { diff --git a/lib/components/base.ts b/lib/components/base.ts index 0a6167dd..9325e2b3 100644 --- a/lib/components/base.ts +++ b/lib/components/base.ts @@ -1,6 +1,6 @@ 'use strict'; import { OnInit, OnDestroy } from '@angular/core'; -import { SpecManager } from '../utils/SpecManager'; +import { SpecManager } from '../utils/spec-manager'; export { SpecManager }; diff --git a/lib/components/index.ts b/lib/components/index.ts index c084ce81..e904bc5a 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -13,13 +13,14 @@ import { SideMenu } from './SideMenu/side-menu'; import { MethodsList } from './MethodsList/methods-list'; import { Method } from './Method/method'; import { Warnings } from './Warnings/warnings'; +import { SecurityDefinitions } from './SecurityDefinitions/security-definitions'; import { Redoc } from './Redoc/redoc'; export const REDOC_DIRECTIVES = [ ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList, - ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc + ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc, SecurityDefinitions ]; export { ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList, -ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc } +ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc, SecurityDefinitions } diff --git a/lib/index.ts b/lib/index.ts index e542152f..32a05be6 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -3,7 +3,7 @@ import './components/Redoc/redoc-initial-styles.css'; import { enableProdMode } from '@angular/core'; import { Redoc } from './components/index'; -import { SpecManager } from './utils/SpecManager'; +import { SpecManager } from './utils/spec-manager'; import { BrowserDomAdapter as DOM } from './utils/browser-adapter'; import { disableDebugTools } from '@angular/platform-browser'; @@ -34,7 +34,7 @@ export function init(specUrl:string, options:any = {}) { moduleRef = appRef; console.log('ReDoc initialized!'); }).catch(err => { - Redoc.displayError(err); + //Redoc.displayError(err); throw err; }); }; diff --git a/lib/redoc.module.ts b/lib/redoc.module.ts index a29e0951..ba6b4be1 100644 --- a/lib/redoc.module.ts +++ b/lib/redoc.module.ts @@ -1,26 +1,29 @@ -import { NgModule } from '@angular/core'; +import { NgModule, ErrorHandler } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { Redoc, REDOC_DIRECTIVES } from './components/index'; +import { Redoc, SecurityDefinitions, REDOC_DIRECTIVES } from './components/index'; import { REDOC_COMMON_DIRECTIVES } from './shared/components/index'; import { REDOC_PIPES } from './utils/pipes'; +import { CustomErrorHandler } from './utils/' -import { OptionsService, RedocEventsService, MenuService, - ScrollService, Hash, WarningsService } from './services/index'; -import { SpecManager } from './utils/SpecManager'; +import { OptionsService, MenuService, + ScrollService, Hash, WarningsService, AppStateService } from './services/'; +import { SpecManager } from './utils/spec-manager'; @NgModule({ imports: [ CommonModule ], declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES], bootstrap: [ Redoc ], + entryComponents: [SecurityDefinitions], providers: [ SpecManager, - RedocEventsService, ScrollService, Hash, MenuService, WarningsService, - OptionsService + OptionsService, + AppStateService, + { provide: ErrorHandler, useClass: CustomErrorHandler } ], exports: [Redoc] }) diff --git a/lib/services/app-state.service.ts b/lib/services/app-state.service.ts new file mode 100644 index 00000000..bc63b5a1 --- /dev/null +++ b/lib/services/app-state.service.ts @@ -0,0 +1,11 @@ +'use strict'; + +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; + +@Injectable() +export class AppStateService { + samplesLanguage = new Subject(); + error = new BehaviorSubject(null); +} diff --git a/lib/services/clipboard.service.ts b/lib/services/clipboard.service.ts index da618fe3..62d77a90 100644 --- a/lib/services/clipboard.service.ts +++ b/lib/services/clipboard.service.ts @@ -1,8 +1,9 @@ 'use strict'; +var isSupported = document.queryCommandSupported && document.queryCommandSupported('copy'); export class Clipboard { static isSupported():boolean { - return document.queryCommandSupported && document.queryCommandSupported('copy'); + return isSupported; } static selectElement(element:any):void { diff --git a/lib/services/events.service.ts b/lib/services/events.service.ts deleted file mode 100644 index 0bc86e1d..00000000 --- a/lib/services/events.service.ts +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -import { EventEmitter, Output } from '@angular/core'; - -export class RedocEventsService { - @Output() bootstrapped = new EventEmitter(); - @Output() samplesLanguageChanged = new EventEmitter(); -} diff --git a/lib/services/hash.service.spec.ts b/lib/services/hash.service.spec.ts index 19e5b5a2..9d959eba 100644 --- a/lib/services/hash.service.spec.ts +++ b/lib/services/hash.service.spec.ts @@ -1,25 +1,22 @@ 'use strict'; +import { + inject +} from '@angular/core/testing'; -import { RedocEventsService } from './events.service'; import { Hash } from './hash.service'; +import { SpecManager } from '../utils/spec-manager'; describe('Hash Service', () => { - let events = new RedocEventsService(); + let specMgr = new SpecManager(); let hashService; - beforeEach(() => { - hashService = new Hash(events); - }); - - afterEach(() => { - hashService.unbind(); - }); + beforeEach(inject([Hash], (_hash) => hashService = _hash)); it('should trigger changed event after ReDoc bootstrapped', (done) => { - spyOn(hashService.changed, 'next').and.callThrough(); - events.bootstrapped.next({}); + spyOn(hashService.value, 'next').and.callThrough(); + specMgr.spec.next({}); setTimeout(() => { - expect(hashService.changed.next).toHaveBeenCalled(); + expect(hashService.value.next).toHaveBeenCalled(); done(); }); }); diff --git a/lib/services/hash.service.ts b/lib/services/hash.service.ts index 777bca4b..e24f0b92 100644 --- a/lib/services/hash.service.ts +++ b/lib/services/hash.service.ts @@ -1,32 +1,31 @@ 'use strict'; -import { Injectable, EventEmitter, Output } from '@angular/core'; -import { BrowserDomAdapter as DOM } from '../utils/browser-adapter'; -import { global } from '@angular/core/src/facade/lang'; +import { Injectable } from '@angular/core'; +import { PlatformLocation } from '@angular/common'; -import { RedocEventsService } from './events.service'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { SpecManager } from '../utils/spec-manager'; @Injectable() export class Hash { - @Output() changed = new EventEmitter(); - private _cancel: any; - constructor(private events:RedocEventsService) { + public value = new BehaviorSubject(''); + constructor(private specMgr: SpecManager, private location: PlatformLocation) { this.bind(); - events.bootstrapped.subscribe(() => this.changed.next(this.hash)); - } - - get hash() { - return DOM.getLocation().hash; - } - - bind() { - this._cancel = DOM.onAndCancel(global, 'hashchange', (evt) => { - this.changed.next(this.hash); - evt.preventDefault(); + this.specMgr.spec.subscribe((spec) => { + if (!spec) return; + setTimeout(() => { + this.value.next(this.hash); + }); }); } - unbind() { - this._cancel(); + get hash() { + return this.location.hash; + } + + bind() { + this.location.onHashChange(() => { + this.value.next(this.hash); + }); } } diff --git a/lib/services/index.ts b/lib/services/index.ts index a54b64e0..aafde800 100644 --- a/lib/services/index.ts +++ b/lib/services/index.ts @@ -1,6 +1,6 @@ 'use strict'; -export * from './events.service'; +export * from './app-state.service'; export * from './options.service'; export * from './menu.service'; export * from './scroll.service'; diff --git a/lib/services/menu.service.spec.ts b/lib/services/menu.service.spec.ts index e48ce0ac..a1cc6059 100644 --- a/lib/services/menu.service.spec.ts +++ b/lib/services/menu.service.spec.ts @@ -9,7 +9,7 @@ import { import { MenuService } from './menu.service'; import { Hash } from './hash.service'; import { ScrollService } from './scroll.service'; -import { SpecManager } from '../utils/SpecManager';; +import { SpecManager } from '../utils/spec-manager';; describe('Menu service', () => { beforeEach(() => { @@ -36,39 +36,42 @@ describe('Menu service', () => { it('should run hashScroll when hash changed', (done) => { spyOn(menu, 'hashScroll').and.callThrough(); - hashService.changed.subscribe(() => { + hashService.value.subscribe((hash) => { + if (!hash) return; expect(menu.hashScroll).toHaveBeenCalled(); menu.hashScroll.and.callThrough(); done(); }); - hashService.changed.next(); + hashService.value.next('nonFalsy'); }); it('should scroll to method when location hash is present [jp]', (done) => { let hash = '#tag/pet/paths/~1pet~1findByStatus/get'; spyOn(menu, 'hashScroll').and.callThrough(); spyOn(window, 'scrollTo').and.stub(); - hashService.changed.subscribe(() => { + hashService.value.subscribe((hash) => { + if (!hash) return; expect(menu.hashScroll).toHaveBeenCalled(); let scrollY = (window.scrollTo).calls.argsFor(0)[1]; expect(scrollY).toBeGreaterThan(0); (window.scrollTo).and.callThrough(); done(); }); - hashService.changed.next(hash); + hashService.value.next(hash); }); it('should scroll to method when location hash is present [operation]', (done) => { let hash = '#operation/getPetById'; spyOn(menu, 'hashScroll').and.callThrough(); spyOn(window, 'scrollTo').and.stub(); - hashService.changed.subscribe(() => { + hashService.value.subscribe((hash) => { + if (!hash) return; expect(menu.hashScroll).toHaveBeenCalled(); let scrollY = (window.scrollTo).calls.argsFor(0)[1]; expect(scrollY).toBeGreaterThan(0); done(); }); - hashService.changed.next(hash); + hashService.value.next(hash); }); it('should select next/prev menu item when scrolled down/up', () => { diff --git a/lib/services/menu.service.ts b/lib/services/menu.service.ts index 7da4ae3e..eff2c2d3 100644 --- a/lib/services/menu.service.ts +++ b/lib/services/menu.service.ts @@ -2,7 +2,7 @@ import { Injectable, EventEmitter } from '@angular/core'; import { ScrollService, INVIEW_POSITION } from './scroll.service'; import { Hash } from './hash.service'; -import { SpecManager } from '../utils/SpecManager'; +import { SpecManager } from '../utils/spec-manager'; import { SchemaHelper, MenuCategory } from './schema-helper.service'; const CHANGE = { @@ -30,7 +30,7 @@ export class MenuService { this.changeActive(CHANGE.INITIAL); - this.hash.changed.subscribe((hash) => { + this.hash.value.subscribe((hash) => { this.hashScroll(hash); }); } diff --git a/lib/services/schema-helper.serivce.spec.ts b/lib/services/schema-helper.serivce.spec.ts index c40d1c06..c298c288 100644 --- a/lib/services/schema-helper.serivce.spec.ts +++ b/lib/services/schema-helper.serivce.spec.ts @@ -1,6 +1,6 @@ 'use strict'; import { SchemaHelper } from './schema-helper.service'; -import { SpecManager } from '../utils/SpecManager'; +import { SpecManager } from '../utils/spec-manager'; describe('Spec Helper', () => { describe('buildMenuTree method', () => { diff --git a/lib/services/schema-helper.service.ts b/lib/services/schema-helper.service.ts index be35f3b1..deb4e774 100644 --- a/lib/services/schema-helper.service.ts +++ b/lib/services/schema-helper.service.ts @@ -1,6 +1,6 @@ 'use strict'; import { JsonPointer } from '../utils/JsonPointer'; -import { SpecManager } from '../utils/SpecManager'; +import { SpecManager } from '../utils/spec-manager'; import {methods as swaggerMethods, keywordTypes} from '../utils/swagger-defs'; import { WarningsService } from './warnings.service'; import * as slugify from 'slugify'; diff --git a/lib/services/schema-normalizer.service.spec.ts b/lib/services/schema-normalizer.service.spec.ts index cab630df..e25c6bc9 100644 --- a/lib/services/schema-normalizer.service.spec.ts +++ b/lib/services/schema-normalizer.service.spec.ts @@ -1,6 +1,6 @@ 'use strict'; import { SchemaNormalizer } from './schema-normalizer.service'; -import { SpecManager } from '../utils/SpecManager';; +import { SpecManager } from '../utils/spec-manager';; describe('Spec Helper', () => { let specMgr:SpecManager = new SpecManager(); diff --git a/lib/services/schema-normalizer.service.ts b/lib/services/schema-normalizer.service.ts index 300a4e27..d4041f1d 100644 --- a/lib/services/schema-normalizer.service.ts +++ b/lib/services/schema-normalizer.service.ts @@ -1,6 +1,6 @@ 'use strict'; import { Injectable } from '@angular/core'; -import { SpecManager } from '../utils/SpecManager'; +import { SpecManager } from '../utils/spec-manager'; import { JsonPointer } from '../utils/JsonPointer'; import { defaults } from '../utils/helpers'; import { WarningsService } from './warnings.service'; diff --git a/lib/services/scroll.service.ts b/lib/services/scroll.service.ts index a87caaa8..bf36f8e9 100644 --- a/lib/services/scroll.service.ts +++ b/lib/services/scroll.service.ts @@ -18,7 +18,6 @@ export class ScrollService { private prevOffsetY: number; private _cancel:any; constructor(optionsService:OptionsService) { - //events.bootstrapped.subscribe(() => this.hashScroll()); this.scrollYOffset = () => optionsService.options.scrollYOffset(); this.$scrollParent = optionsService.options.$scrollParent; this.scroll = new EventEmitter(); @@ -31,11 +30,12 @@ export class ScrollService { /* returns 1 if element if above the view, 0 if in view and -1 below the view */ getElementPos($el) { - if (Math.floor($el.getBoundingClientRect().top) > this.scrollYOffset()) { + let scrollYOffset = this.scrollYOffset(); + if (Math.floor($el.getBoundingClientRect().top) > scrollYOffset) { return INVIEW_POSITION.ABOVE; } - if ($el.getBoundingClientRect().bottom <= this.scrollYOffset()) { + if ($el.getBoundingClientRect().bottom <= scrollYOffset) { return INVIEW_POSITION.BELLOW; } return INVIEW_POSITION.INVIEW; diff --git a/lib/utils/browser-update.js b/lib/utils/browser-update.js deleted file mode 100644 index bf54a275..00000000 --- a/lib/utils/browser-update.js +++ /dev/null @@ -1,10 +0,0 @@ -/*eslint no-unused-vars: 0*/ -/*eslint strict: 0*/ -var $buoop = { vs: {i:9, f:25, o:12.1, s:7}, c:2 }; -function $buo_f(){ - var e = document.createElement('script'); - e.src = '//browser-update.org/update.min.js'; - document.body.appendChild(e); -} -try {document.addEventListener('DOMContentLoaded', $buo_f, false);} -catch(e){window['attachEvent']('onload', $buo_f);} diff --git a/lib/utils/custom-error-handler.ts b/lib/utils/custom-error-handler.ts new file mode 100644 index 00000000..b45ca981 --- /dev/null +++ b/lib/utils/custom-error-handler.ts @@ -0,0 +1,12 @@ +import { ErrorHandler, Injectable } from '@angular/core'; +import { AppStateService } from '../services/app-state.service'; + +@Injectable() +export class CustomErrorHandler implements ErrorHandler { + constructor(private appState: AppStateService) { + } + handleError(error) { + console.log(error); + this.appState.error.next(error); + } +} diff --git a/lib/utils/helpers.js b/lib/utils/helpers.js deleted file mode 100644 index 2651e62e..00000000 --- a/lib/utils/helpers.js +++ /dev/null @@ -1,103 +0,0 @@ -'use strict'; -var Remarkable = require('remarkable'); -var md = new Remarkable({ - html: true, - linkify: true, - breaks: false, - typographer: false, - highlight: function (str, lang) { - if (lang === 'json') - lang = 'js'; - var grammar = Prism.languages[lang]; - if (!grammar) - return str; - return Prism.highlight(str, grammar); - } -}); -function renderMd(rawText, headersHandler) { - var _origRule; - if (headersHandler) { - _origRule = { - open: md.renderer.rules.heading_open, - close: md.renderer.rules.heading_close - }; - md.renderer.rules.heading_open = function (tokens, idx) { - if (tokens[idx].hLevel !== 1) { - return _origRule.open(tokens, idx); - } - else { - return headersHandler.open(tokens, idx); - } - }; - md.renderer.rules.heading_close = function (tokens, idx) { - if (tokens[idx].hLevel !== 1) { - return _origRule.close(tokens, idx); - } - else { - return headersHandler.close(tokens, idx); - } - }; - } - var res = md.render(rawText); - if (headersHandler) { - md.renderer.rules.heading_open = _origRule.open; - md.renderer.rules.heading_close = _origRule.close; - } - return res; -} -exports.renderMd = renderMd; -function statusCodeType(statusCode) { - if (statusCode < 100 || statusCode > 599) { - throw new Error('invalid HTTP code'); - } - var res = 'success'; - if (statusCode >= 300 && statusCode < 400) { - res = 'redirect'; - } - else if (statusCode >= 400) { - res = 'error'; - } - else if (statusCode < 200) { - res = 'info'; - } - return res; -} -exports.statusCodeType = statusCodeType; -function defaults(target, src) { - var props = Object.keys(src); - var index = -1, length = props.length; - while (++index < length) { - var key = props[index]; - if (target[key] === undefined) { - target[key] = src[key]; - } - } - return target; -} -exports.defaults = defaults; -function safePush(obj, prop, val) { - if (!obj[prop]) - obj[prop] = []; - obj[prop].push(val); -} -exports.safePush = safePush; -function throttle(fn, threshhold, scope) { - threshhold = threshhold || 250; - var last, deferTimer; - return function () { - var context = scope || this; - var now = +new Date, args = arguments; - if (last && now < last + threshhold) { - clearTimeout(deferTimer); - deferTimer = setTimeout(function () { - last = now; - fn.apply(context, args); - }, threshhold); - } - else { - last = now; - fn.apply(context, args); - } - }; -} -exports.throttle = throttle; diff --git a/lib/utils/index.ts b/lib/utils/index.ts new file mode 100644 index 00000000..e1b0cf0c --- /dev/null +++ b/lib/utils/index.ts @@ -0,0 +1 @@ +export * from './custom-error-handler'; diff --git a/lib/utils/SpecManager.ts b/lib/utils/spec-manager.ts similarity index 91% rename from lib/utils/SpecManager.ts rename to lib/utils/spec-manager.ts index 11f647b5..f9e9d4c4 100644 --- a/lib/utils/SpecManager.ts +++ b/lib/utils/spec-manager.ts @@ -5,10 +5,13 @@ import { JsonPointer } from './JsonPointer'; import { renderMd, safePush } from './helpers'; import * as slugify from 'slugify'; import { parse as urlParse, resolve as urlResolve } from 'url'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; export class SpecManager { public _schema: any = {}; public apiUrl: string; + + public spec = new BehaviorSubject(null); private _instance: any; private _url: string; @@ -24,17 +27,19 @@ export class SpecManager { SpecManager.prototype._instance = this; } - load(url) { + load(urlOrObject: string|Object) { + this.schema = null; let promise = new Promise((resolve, reject) => { - this._schema = {}; - - JsonSchemaRefParser.bundle(url, {http: {withCredentials: false}}) + JsonSchemaRefParser.bundle(urlOrObject, {http: {withCredentials: false}}) .then(schema => { + if (typeof urlOrObject === 'string') { + this._url = urlOrObject; + } + this._schema = schema; try { - this._url = url; - this._schema = schema; this.init(); resolve(this._schema); + this.spec.next(this._schema); } catch(err) { reject(err); } @@ -88,6 +93,11 @@ export class SpecManager { return this._schema; } + set schema(val:any) { + this._schema = val; + this.spec.next(this._schema); + } + byPointer(pointer) { let res = null; try { diff --git a/tests/spec-bundle.js b/tests/spec-bundle.js index eced2be4..15692b94 100644 --- a/tests/spec-bundle.js +++ b/tests/spec-bundle.js @@ -19,11 +19,11 @@ require('zone.js/dist/jasmine-patch'); require('../lib/vendor'); var TestBed = require('@angular/core/testing').TestBed; +var ErrorHandler = require('@angular/core').ErrorHandler; var BrowserDynamicTestingModule = require('@angular/platform-browser-dynamic/testing').BrowserDynamicTestingModule; var platformBrowserDynamicTesting = require('@angular/platform-browser-dynamic/testing').platformBrowserDynamicTesting; var services = require('../lib/services/index'); -var SpecManager = require('../lib/utils/SpecManager').SpecManager; -var BrowserDomAdapter = require('@angular/platform-browser/src/browser/browser_adapter').BrowserDomAdapter; +var SpecManager = require('../lib/utils/spec-manager').SpecManager; var REDOC_PIPES = require('../lib/utils/pipes').REDOC_PIPES; var REDOC_COMMON_DIRECTIVES = require('../lib/shared/components/index').REDOC_COMMON_DIRECTIVES; var REDOC_DIRECTIVES = require('../lib/components/index').REDOC_DIRECTIVES; @@ -36,15 +36,14 @@ TestBed.initTestEnvironment( beforeEach(function() { TestBed.configureTestingModule({ providers: [ - BrowserDomAdapter, SpecManager, - BrowserDomAdapter, - services.RedocEventsService, + services.AppStateService, services.ScrollService, services.Hash, services.MenuService, services.WarningsService, - services.OptionsService + services.OptionsService, + { provide: ErrorHandler, useClass: services.CustomErrorHandler } ], declarations: [REDOC_PIPES, REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES] }); diff --git a/tests/unit/SpecManager.spec.ts b/tests/unit/SpecManager.spec.ts index 6ab191f9..0deb1011 100644 --- a/tests/unit/SpecManager.spec.ts +++ b/tests/unit/SpecManager.spec.ts @@ -1,6 +1,6 @@ 'use strict'; -import { SpecManager } from '../../lib/utils/SpecManager'; +import { SpecManager } from '../../lib/utils/spec-manager'; describe('Utils', () => { describe('Schema manager', () => { let specMgr; From 5583c8a3133db3a5fe3a800b7710cd712dd1ae86 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 23 Oct 2016 20:36:34 +0300 Subject: [PATCH 05/26] Enabled a few codelyzer rules --- lib/services/schema-helper.service.ts | 2 +- tslint.json | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/services/schema-helper.service.ts b/lib/services/schema-helper.service.ts index deb4e774..dfe96f9b 100644 --- a/lib/services/schema-helper.service.ts +++ b/lib/services/schema-helper.service.ts @@ -1,7 +1,7 @@ 'use strict'; import { JsonPointer } from '../utils/JsonPointer'; import { SpecManager } from '../utils/spec-manager'; -import {methods as swaggerMethods, keywordTypes} from '../utils/swagger-defs'; +import { methods as swaggerMethods, keywordTypes } from '../utils/swagger-defs'; import { WarningsService } from './warnings.service'; import * as slugify from 'slugify'; diff --git a/tslint.json b/tslint.json index 4783bdfb..19d7a0b3 100644 --- a/tslint.json +++ b/tslint.json @@ -38,12 +38,21 @@ "directive-selector-type": [true, "attribute"], "component-selector-type": [true, "element"], + "component-selector-name": [true, "kebab-case"], + "directive-selector-name": [true, "camelCase"], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, "no-input-rename": true, "no-output-rename": true, + "pipe-naming": [true, "camelCase"], + "import-destructuring-spacing": true, "use-life-cycle-interface": true, - "use-pipe-transform-interface": true + "use-pipe-transform-interface": true, + "templates-use-public": true, + "no-access-missing-member": true, + "invoke-injectable": true, + "no-forward-ref": true, + "no-attribute-parameter-decorator": true } } From f3b7c13ae0eb2b6baa9e4e1cac9963b94f4d898a Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 23 Oct 2016 20:36:55 +0300 Subject: [PATCH 06/26] Fix npm2 peer/deps issue (#127) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 851e7532..ac2cea96 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "phantomjs-prebuilt": "^2.1.7", "protractor": "^4.0.4", "raw-loader": "^0.5.1", - "rxjs": "^5.0.0-beta.12", + "rxjs": "5.0.0-beta.12", "shelljs": "^0.7.0", "should": "^11.1.0", "sinon": "^1.17.2", From c95755718f1c5092240030e3d409f58dbf2bfc26 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sat, 29 Oct 2016 12:31:56 +0300 Subject: [PATCH 07/26] Get rid of facade/lang deps (fixes #129) --- lib/services/options.service.ts | 2 +- lib/utils/JsonFormatterPipe.ts | 1 - lib/utils/helpers.ts | 16 ++++++++++++++++ lib/utils/pipes.ts | 2 +- 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/lib/services/options.service.ts b/lib/services/options.service.ts index a42d342f..66ead611 100644 --- a/lib/services/options.service.ts +++ b/lib/services/options.service.ts @@ -1,6 +1,6 @@ 'use strict'; import { Injectable } from '@angular/core'; -import { isFunction, isString } from '@angular/core/src/facade/lang'; +import { isFunction, isString } from '../utils/helpers'; import { BrowserDomAdapter as DOM } from '../utils/browser-adapter'; const defaults = { diff --git a/lib/utils/JsonFormatterPipe.ts b/lib/utils/JsonFormatterPipe.ts index 4c3006af..3be316e6 100644 --- a/lib/utils/JsonFormatterPipe.ts +++ b/lib/utils/JsonFormatterPipe.ts @@ -1,6 +1,5 @@ 'use strict'; import { Pipe, PipeTransform } from '@angular/core'; -//import { isBlank } from '@angular/core/src/facade/lang'; import { DomSanitizer } from '@angular/platform-browser'; function isBlank(obj) { diff --git a/lib/utils/helpers.ts b/lib/utils/helpers.ts index c2d169e5..991526bf 100644 --- a/lib/utils/helpers.ts +++ b/lib/utils/helpers.ts @@ -21,6 +21,22 @@ interface HeadersHandler { close: Function; } +export function stringify(obj:any) { + return JSON.stringify(obj); +} + +export function isString(str:any) { + return typeof str === 'string'; +} + +export function isFunction(func: any) { + return typeof func === 'function'; +} + +export function isBlank(obj: any): boolean { + return obj == null; +} + export function renderMd(rawText:string, headersHandler?:HeadersHandler) { let _origRule; if (headersHandler) { diff --git a/lib/utils/pipes.ts b/lib/utils/pipes.ts index a318fce4..a28a4728 100644 --- a/lib/utils/pipes.ts +++ b/lib/utils/pipes.ts @@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; -import { isString, stringify, isBlank } from '@angular/core/src/facade/lang'; +import { isString, stringify, isBlank } from './helpers'; import JsonPointer from './JsonPointer'; import { renderMd } from './helpers'; import { JsonFormatter } from './JsonFormatterPipe'; From 44cd7784aa2d1889369b94123ae79c9ccc78e0c3 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 30 Oct 2016 17:54:44 +0200 Subject: [PATCH 08/26] Redoc error handler refactor --- .../Redoc/redoc-initial-styles.scss | 30 +++++-------------- lib/components/Redoc/redoc.html | 2 +- lib/components/Redoc/redoc.scss | 16 ++++++++++ lib/components/Redoc/redoc.ts | 10 +++++-- lib/utils/custom-error-handler.ts | 5 ++-- 5 files changed, 36 insertions(+), 27 deletions(-) diff --git a/lib/components/Redoc/redoc-initial-styles.scss b/lib/components/Redoc/redoc-initial-styles.scss index 1a1b441b..1274e620 100644 --- a/lib/components/Redoc/redoc-initial-styles.scss +++ b/lib/components/Redoc/redoc-initial-styles.scss @@ -1,15 +1,18 @@ @import url('//fonts.googleapis.com/css?family=Roboto:300,400,700'); @import url('//fonts.googleapis.com/css?family=Montserrat:400,700'); -redoc.loading { +:host.loading { position: relative; display: block; - min-height:350px; + min-height: 350px; } @keyframes rotate { - 0% {transform: rotate(0deg)} - 100% {transform: rotate(360deg)} + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); + } } redoc.loading:before { @@ -33,7 +36,7 @@ redoc.loading:before { } redoc.loading:after { - z-index: 10000; + z-index: 10000; background-image: url('data:image/svg+xml;utf8,'); animation: 2s rotate linear infinite; width: 50px; @@ -51,20 +54,3 @@ redoc.loading:after { redoc.loading-remove:before, redoc.loading-remove:after { opacity: 0; } - -.redoc-error { - padding: 20px; - text-align: center; - color: #cc0000; - - > h2 { - color: #cc0000; - font-size: 40px; - } -} - -.redoc-error-details { - max-width: 750px; - margin: 0 auto; - font-size: 18px; -} diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 11e8c3d7..8b4476ad 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -1,6 +1,6 @@

Oops... ReDoc failed to render this spec

-
{{_error.message}}
+
{{error.message}}
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index 6e1cd918..0570a1a4 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -256,3 +256,19 @@ footer { font-weight: bold; } } + +.redoc-error { + padding: 20px; + text-align: center; + color: #cc0000; + > h2 { + color: #cc0000; + font-size: 40px; + } +} + +.redoc-error-details { + max-width: 750px; + margin: 0 auto; + font-size: 18px; +} diff --git a/lib/components/Redoc/redoc.ts b/lib/components/Redoc/redoc.ts index fdceb28e..93d76b36 100644 --- a/lib/components/Redoc/redoc.ts +++ b/lib/components/Redoc/redoc.ts @@ -82,8 +82,14 @@ export class Redoc extends BaseComponent implements OnInit { ngOnInit() { this.appState.error.subscribe(_err => { - this.error = _err; - this.changeDetector.detectChanges(); + // do not show errors that occuered after spec has been already loaded + // TODO: change this in future to show in e.g. popup + //if (this.specLoaded) return; + + setTimeout(() => { + this.error = _err; + this.changeDetector.detectChanges() + }); }) if (this.specUrl) { diff --git a/lib/utils/custom-error-handler.ts b/lib/utils/custom-error-handler.ts index b45ca981..7df0e7f9 100644 --- a/lib/utils/custom-error-handler.ts +++ b/lib/utils/custom-error-handler.ts @@ -2,11 +2,12 @@ import { ErrorHandler, Injectable } from '@angular/core'; import { AppStateService } from '../services/app-state.service'; @Injectable() -export class CustomErrorHandler implements ErrorHandler { +export class CustomErrorHandler extends ErrorHandler { constructor(private appState: AppStateService) { + super(true); } handleError(error) { - console.log(error); this.appState.error.next(error); + super.handleError(error); } } From c39166266cd9149b114ab9b8656b2f9facdad513 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 30 Oct 2016 17:56:24 +0200 Subject: [PATCH 09/26] Refactor markdown renderer --- lib/utils/helpers.ts | 57 +---------------------- lib/utils/index.ts | 2 + lib/utils/md-renderer.ts | 95 +++++++++++++++++++++++++++++++++++++++ lib/utils/pipes.ts | 11 +++-- lib/utils/spec-manager.ts | 20 +++------ 5 files changed, 111 insertions(+), 74 deletions(-) create mode 100644 lib/utils/md-renderer.ts diff --git a/lib/utils/helpers.ts b/lib/utils/helpers.ts index 991526bf..46f1ed66 100644 --- a/lib/utils/helpers.ts +++ b/lib/utils/helpers.ts @@ -1,25 +1,4 @@ 'use strict'; -import * as Remarkable from 'remarkable'; -declare var Prism: any; - -const md = new Remarkable({ - html: true, - linkify: true, - breaks: false, - typographer: false, - highlight: (str, lang) => { - if (lang === 'json') lang = 'js'; - let grammar = Prism.languages[lang]; - //fallback to clike - if (!grammar) return str; - return Prism.highlight(str, grammar); - } -}); - -interface HeadersHandler { - open: Function; - close: Function; -} export function stringify(obj:any) { return JSON.stringify(obj); @@ -34,41 +13,7 @@ export function isFunction(func: any) { } export function isBlank(obj: any): boolean { - return obj == null; -} - -export function renderMd(rawText:string, headersHandler?:HeadersHandler) { - let _origRule; - if (headersHandler) { - _origRule = { - open: md.renderer.rules.heading_open, - close: md.renderer.rules.heading_close - }; - md.renderer.rules.heading_open = (tokens, idx) => { - if (tokens[idx].hLevel !== 1 ) { - return _origRule.open(tokens, idx); - } else { - return headersHandler.open(tokens, idx); - } - }; - - md.renderer.rules.heading_close = (tokens, idx) => { - if (tokens[idx].hLevel !== 1 ) { - return _origRule.close(tokens, idx); - } else { - return headersHandler.close(tokens, idx); - } - }; - } - - let res = md.render(rawText); - - if (headersHandler) { - md.renderer.rules.heading_open = _origRule.open; - md.renderer.rules.heading_close = _origRule.close; - } - - return res; + return obj == undefined; } export function statusCodeType(statusCode) { diff --git a/lib/utils/index.ts b/lib/utils/index.ts index e1b0cf0c..cd933708 100644 --- a/lib/utils/index.ts +++ b/lib/utils/index.ts @@ -1 +1,3 @@ export * from './custom-error-handler'; +export * from './helpers'; +export * from './md-renderer'; diff --git a/lib/utils/md-renderer.ts b/lib/utils/md-renderer.ts new file mode 100644 index 00000000..3c89bd67 --- /dev/null +++ b/lib/utils/md-renderer.ts @@ -0,0 +1,95 @@ +'use strict'; + +import { Injectable } from '@angular/core'; +import * as slugify from 'slugify'; +import * as Remarkable from 'remarkable'; + +import { SecurityDefinitions } from '../components/'; + +declare var Prism: any; +const md = new Remarkable({ + html: true, + linkify: true, + breaks: false, + typographer: false, + highlight: (str, lang) => { + if (lang === 'json') lang = 'js'; + let grammar = Prism.languages[lang]; + //fallback to clike + if (!grammar) return str; + return Prism.highlight(str, grammar); + } +}); + +interface HeadersHandler { + open: Function; + close: Function; +} + +@Injectable() +export class MdRenderer { + private _origRules:any = {}; + private _preProcessors:Function[] = []; + + public firstLevelHeadings: string[] = []; + constructor(private raw: boolean = false) { + // TODO + if (!raw) { + this.addPreprocessor(SecurityDefinitions.insertTagIntoDescription); + } + } + + addPreprocessor(p: Function) { + this._preProcessors.push(p); + } + + saveOrigRules() { + this._origRules.open = md.renderer.rules.heading_open; + this._origRules.close = md.renderer.rules.heading_close; + } + + restoreOrigRules() { + md.renderer.rules.heading_open = this._origRules.open; + md.renderer.rules.heading_close = this._origRules.close; + } + + headingOpenRule(tokens, idx) { + if (tokens[idx].hLevel !== 1 ) { + return this._origRules.open(tokens, idx); + } else { + let content = tokens[idx + 1].content; + this.firstLevelHeadings.push(content); + let contentSlug = slugify(content); + return `` + + ``; + } + } + + headingCloseRule(tokens, idx) { + if (tokens[idx].hLevel !== 1 ) { + return this._origRules.close(tokens, idx); + } else { + return `\n`; + } + } + + renderMd(rawText:string) { + if (!this.raw) { + this.saveOrigRules(); + md.renderer.rules.heading_open = this.headingOpenRule.bind(this); + md.renderer.rules.heading_close = this.headingCloseRule.bind(this); + } + let text = rawText; + + for (let i=0; i${renderMd(value)}` + `${this.renderer.renderMd(value)}` ); } } @@ -125,5 +128,5 @@ export class EncodeURIComponentPipe implements PipeTransform { } export const REDOC_PIPES = [ - JsonPointerEscapePipe, MarkedPipe, SafePipe, PrismPipe, EncodeURIComponentPipe, JsonFormatter + JsonPointerEscapePipe, MarkedPipe, SafePipe, PrismPipe, EncodeURIComponentPipe, JsonFormatter, KeysPipe ]; diff --git a/lib/utils/spec-manager.ts b/lib/utils/spec-manager.ts index f9e9d4c4..283d82e3 100644 --- a/lib/utils/spec-manager.ts +++ b/lib/utils/spec-manager.ts @@ -2,11 +2,11 @@ import * as JsonSchemaRefParser from 'json-schema-ref-parser'; import { JsonPointer } from './JsonPointer'; -import { renderMd, safePush } from './helpers'; -import * as slugify from 'slugify'; import { parse as urlParse, resolve as urlResolve } from 'url'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { MdRenderer } from './'; + export class SpecManager { public _schema: any = {}; public apiUrl: string; @@ -75,18 +75,10 @@ export class SpecManager { } preprocess() { - this._schema.info['x-redoc-html-description'] = renderMd( this._schema.info.description, { - open: (tokens, idx) => { - let content = tokens[idx + 1].content; - safePush(this._schema.info, 'x-redoc-markdown-headers', content); - content = slugify(content); - return `` + - ``; - }, - close: (tokens, idx) => { - return ``; - } - }); + let mdRender = new MdRenderer(); + if (!this._schema.info.description) this._schema.info.description = ''; + this._schema.info['x-redoc-html-description'] = mdRender.renderMd(this._schema.info.description); + this._schema.info['x-redoc-markdown-headers'] = mdRender.firstLevelHeadings; } get schema() { From f786955442d830f0296784c9b9d40703c29818da Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 30 Oct 2016 17:57:26 +0200 Subject: [PATCH 10/26] Dynamic component instantiator from html --- lib/services/component-parser.service.ts | 88 +++++++++++++++++++ lib/services/content-projector.service.ts | 39 ++++++++ .../dynamic-ng2-viewer.component.ts | 47 ++++++++++ lib/shared/components/index.ts | 5 +- 4 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 lib/services/component-parser.service.ts create mode 100644 lib/services/content-projector.service.ts create mode 100644 lib/shared/components/DynamicNg2Viewer/dynamic-ng2-viewer.component.ts diff --git a/lib/services/component-parser.service.ts b/lib/services/component-parser.service.ts new file mode 100644 index 00000000..2a3d1f82 --- /dev/null +++ b/lib/services/component-parser.service.ts @@ -0,0 +1,88 @@ +'use strict'; + +import { + Injectable, + Renderer, + ComponentRef, + Type, + Injector, + Inject, + ComponentFactoryResolver +} from '@angular/core'; + +type NodesOrComponents = HTMLElement | ComponentRef; +export const COMPONENT_PARSER_ALLOWED = 'COMPONENT_PARSER_ALLOWED'; + +const COMPONENT_REGEXP = '^\\s*\\s*$'; + +@Injectable() +export class ComponentParser { + private renderer: Renderer; + private allowedComponents: any; + + static contains(content: string, componentSelector: string) { + let regexp = new RegExp(COMPONENT_REGEXP.replace('{component}', `<${componentSelector}.*>`), 'mi'); + return regexp.test(content); + } + + static build(componentSelector) { + return ``; + } + + constructor( + private resolver: ComponentFactoryResolver, + @Inject(COMPONENT_PARSER_ALLOWED) allowedComponents + ) { + this.allowedComponents = allowedComponents; + } + + setRenderer(_renderer: Renderer) { + this.renderer = _renderer; + } + + splitIntoNodesOrComponents(content: string, injector: Injector):NodesOrComponents[] { + let componentDefs = []; + let match; + let anyCompRegexp = new RegExp(COMPONENT_REGEXP.replace('{component}', '(.*?)'), 'gmi'); + while (match = anyCompRegexp.exec(content)) { + componentDefs.push(match[1]); + } + + let splitCompRegexp = new RegExp(COMPONENT_REGEXP.replace('{component}', '.*?'), 'mi'); + let htmlParts = content.split(splitCompRegexp); + let res = []; + for (let i = 0; i < htmlParts.length; i++) { + let node = this.renderer.createElement(null, 'div'); + this.renderer.setElementProperty(node, 'innerHTML', htmlParts[i]); + if (htmlParts[i]) res.push(node); + if (componentDefs[i]) { + let componentRef = this.createComponentByHtml(componentDefs[i], injector); + res.push(componentRef); + } + } + return res; + } + + createComponentByHtml(htmlTag: string, injector:Injector):ComponentRef| null { + let {componentType, options} = this._parseHtml(htmlTag); + if (!componentType) return null; + + let factory = this.resolver.resolveComponentFactory(componentType); + return factory.create(injector); + } + + private _parseHtml(htmlTag: string):{componentType: Type | null, options: any} { + // TODO: for now only primitive parsing by tagname + let match = /<([\w_-]+).*?>/.exec(htmlTag); + if (match.length <= 1) return { componentType: null, options: null }; + let componentName = match[1]; + + let componentType = this.allowedComponents[componentName]; + // TODO parse options + let options = {}; + return { + componentType, + options + }; + } +} diff --git a/lib/services/content-projector.service.ts b/lib/services/content-projector.service.ts new file mode 100644 index 00000000..a5d81653 --- /dev/null +++ b/lib/services/content-projector.service.ts @@ -0,0 +1,39 @@ +'use strict'; + +import { + Injectable, + ComponentFactory, + ComponentRef, + ViewContainerRef +} from '@angular/core'; + +@Injectable() +export class ContentProjector { + instantiateAndProject(componentFactory: ComponentFactory, + parentView:ViewContainerRef, projectedNodesOrComponents: any[]):ComponentRef { + let contextInjector = parentView.parentInjector; + + let projectedNodes = []; + let componentRefs:ComponentRef[] = []; + + for (let i=0; i < projectedNodesOrComponents.length; i++) { + let nodeOrCompRef = projectedNodesOrComponents[i]; + if (nodeOrCompRef instanceof ComponentRef) { + projectedNodes.push(nodeOrCompRef.location.nativeElement); + componentRefs.push(nodeOrCompRef); + } else { + projectedNodes.push(nodeOrCompRef); + } + } + + let parentCompRef = parentView.createComponent(componentFactory, null, contextInjector, [projectedNodes]); + let appElement = (parentView)._element; + appElement.nestedViews = appElement.nestedViews || []; + for (let i=0; i < componentRefs.length; i++) { + let compRef = componentRefs[i]; + appElement.nestedViews.push((compRef.hostView).internalView); + (compRef.hostView).internalView.addToContentChildren(appElement); + } + return parentCompRef; + } +} diff --git a/lib/shared/components/DynamicNg2Viewer/dynamic-ng2-viewer.component.ts b/lib/shared/components/DynamicNg2Viewer/dynamic-ng2-viewer.component.ts new file mode 100644 index 00000000..56dbf968 --- /dev/null +++ b/lib/shared/components/DynamicNg2Viewer/dynamic-ng2-viewer.component.ts @@ -0,0 +1,47 @@ +'use strict'; + +import { + Component, + EventEmitter, + Output, + Input, + OnInit, + ViewContainerRef, + ComponentFactoryResolver, + Renderer +} from '@angular/core'; + +import { + ComponentParser, + ContentProjector +} from '../../../services/'; + +@Component({ + selector: 'dynamic-ng2-viewer', + template: '' +}) +export class DynamicNg2Viewer implements OnInit { + @Input() html: string; + + constructor( + private view: ViewContainerRef, + private projector: ContentProjector, + private parser: ComponentParser, + private resolver: ComponentFactoryResolver, + private renderer: Renderer) { + } + + ngOnInit() { + this.parser.setRenderer(this.renderer); + let nodesOrComponents = this.parser.splitIntoNodesOrComponents(this.html, this.view.injector); + let wrapperFactory = this.resolver.resolveComponentFactory(DynamicNg2Wrapper); + let ref = this.projector.instantiateAndProject(wrapperFactory, this.view, nodesOrComponents); + ref.changeDetectorRef.markForCheck(); + } +} + +@Component({ + selector: 'dynamic-ng2-wrapper', + template: '' +}) +export class DynamicNg2Wrapper {} diff --git a/lib/shared/components/index.ts b/lib/shared/components/index.ts index 195e796a..b273f1a5 100644 --- a/lib/shared/components/index.ts +++ b/lib/shared/components/index.ts @@ -5,9 +5,10 @@ import { Tabs, Tab } from './Tabs/tabs'; import { Zippy } from './Zippy/zippy'; import { CopyButton } from './CopyButton/copy-button.directive'; import { SelectOnClick } from './SelectOnClick/select-on-click.directive'; +import { DynamicNg2Viewer, DynamicNg2Wrapper } from './DynamicNg2Viewer/dynamic-ng2-viewer.component'; export const REDOC_COMMON_DIRECTIVES = [ - DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick + DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper ]; -export { DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick } +export { DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper } From b8b3bf328e06796c9763ea85eb98a8b5645f15b6 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 30 Oct 2016 17:58:06 +0200 Subject: [PATCH 11/26] Security Definitions + other --- demo/swagger.yaml | 1 - lib/components/ApiInfo/api-info.html | 2 +- .../security-definitions.html | 42 +++++++++++++++++- .../security-definitions.scss | 44 +++++++++++-------- .../security-definitions.ts | 29 +++++++++++- lib/redoc.module.ts | 25 ++++++++--- lib/services/index.ts | 3 ++ lib/services/menu.service.ts | 5 ++- 8 files changed, 118 insertions(+), 33 deletions(-) diff --git a/demo/swagger.yaml b/demo/swagger.yaml index 9bb9dee4..ac84c381 100644 --- a/demo/swagger.yaml +++ b/demo/swagger.yaml @@ -26,7 +26,6 @@ info: This API features Cross-Origin Resource Sharing (CORS) implemented in compliance with [W3C spec](https://www.w3.org/TR/cors/). And that allows cross-domain communication from the browser. All responses have a wildcard same-origin which makes them completely public and accessible to everyone, including any code on any site. - version: 1.0.0 title: Swagger Petstore termsOfService: 'http://swagger.io/terms/' diff --git a/lib/components/ApiInfo/api-info.html b/lib/components/ApiInfo/api-info.html index de1daf78..b8a8428c 100644 --- a/lib/components/ApiInfo/api-info.html +++ b/lib/components/ApiInfo/api-info.html @@ -17,5 +17,5 @@ {{info.license.name}}

-

+
diff --git a/lib/components/SecurityDefinitions/security-definitions.html b/lib/components/SecurityDefinitions/security-definitions.html index 1a1955ad..864f239f 100644 --- a/lib/components/SecurityDefinitions/security-definitions.html +++ b/lib/components/SecurityDefinitions/security-definitions.html @@ -1,2 +1,40 @@ -

Hello world

-

{{message}} {{pointer}}

+
+

+ {{def.name}}

+
+
+ + + + + + + + + + +
Security scheme type: {{def.details._displayType}}
{{def.details.in}} parameter name: {{def.details.name}}
+ +
+
diff --git a/lib/components/SecurityDefinitions/security-definitions.scss b/lib/components/SecurityDefinitions/security-definitions.scss index 0c7c1a81..a587e985 100644 --- a/lib/components/SecurityDefinitions/security-definitions.scss +++ b/lib/components/SecurityDefinitions/security-definitions.scss @@ -1,28 +1,36 @@ @import '../../shared/styles/variables'; -.api-info-header { - font-weight: normal; +.security-definition:not(:last-of-type) { + border-bottom: 1px solid rgba($text-color, .3); + padding-bottom: 20px; } -:host > div { - width: 60%; - padding: 40px; - box-sizing: border-box; - - @media (max-width: $right-panel-squash-breakpoint) { - width: 100%; - } +h2, h3 { + color: $secondary-color; } -a.openapi-button { - padding: 3px 8px 4px 8px; - color: $primary-color; - border: 1px solid $primary-color; - margin-left: 0.5em; - font-weight: normal; +:host h2 { + margin-top: 40px; } -:host /deep/ [section] { - padding-top: 60px; +h3 { + margin: 1em 0; + font-size: 1em; +} + +:host .redoc-markdown-block table { margin-top: 20px; } + +table.details th, table.details td { + font-weight: bold; + width: 200px; + max-width: 50%; +} + +table.details th { + text-align: left; + padding: 6px; + text-transform: capitalize; + font-weight: normal; +} diff --git a/lib/components/SecurityDefinitions/security-definitions.ts b/lib/components/SecurityDefinitions/security-definitions.ts index 401bb06e..b5cd30fc 100644 --- a/lib/components/SecurityDefinitions/security-definitions.ts +++ b/lib/components/SecurityDefinitions/security-definitions.ts @@ -1,7 +1,15 @@ 'use strict'; -import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'; +import { Component, ChangeDetectionStrategy, OnInit, HostListener } from '@angular/core'; import { SpecManager, BaseComponent } from '../base'; +import { ComponentParser } from '../../services/'; + +const AUTH_TYPES = { + 'oauth2': 'OAuth2', + 'apiKey': 'API Key', + 'basic': 'Basic Authorization' +} + @Component({ selector: 'security-definitions', styleUrls: ['./security-definitions.css'], @@ -11,12 +19,29 @@ import { SpecManager, BaseComponent } from '../base'; export class SecurityDefinitions extends BaseComponent implements OnInit { info: any = {}; specUrl: String; - message: string = 'Roman'; + defs: any[]; + + static insertTagIntoDescription(md:string) { + if (ComponentParser.contains(md, 'security-definitions')) return md; + if (/^#\s?Authentication\s*$/mi.test(md)) return md; + return md + '\n# Authentication \n' + ComponentParser.build('security-definitions'); + } + constructor(specMgr:SpecManager) { super(specMgr); } init() { + this.componentSchema = this.componentSchema.securityDefinitions; + this.defs = Object.keys(this.componentSchema).map(name => { + let details = this.componentSchema[name]; + details._displayType = AUTH_TYPES[details.type]; + return { + name, + details + } + }); + } ngOnInit() { diff --git a/lib/redoc.module.ts b/lib/redoc.module.ts index ba6b4be1..16a1cf41 100644 --- a/lib/redoc.module.ts +++ b/lib/redoc.module.ts @@ -2,19 +2,27 @@ import { NgModule, ErrorHandler } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Redoc, SecurityDefinitions, REDOC_DIRECTIVES } from './components/index'; -import { REDOC_COMMON_DIRECTIVES } from './shared/components/index'; -import { REDOC_PIPES } from './utils/pipes'; +import { REDOC_COMMON_DIRECTIVES, DynamicNg2Wrapper } from './shared/components/index'; +import { REDOC_PIPES, KeysPipe } from './utils/pipes'; import { CustomErrorHandler } from './utils/' -import { OptionsService, MenuService, - ScrollService, Hash, WarningsService, AppStateService } from './services/'; +import { + OptionsService, + MenuService, + ScrollService, + Hash, + WarningsService, + AppStateService, + ComponentParser, + ContentProjector, + COMPONENT_PARSER_ALLOWED } from './services/'; import { SpecManager } from './utils/spec-manager'; @NgModule({ imports: [ CommonModule ], - declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES], + declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES ], bootstrap: [ Redoc ], - entryComponents: [SecurityDefinitions], + entryComponents: [ SecurityDefinitions, DynamicNg2Wrapper ], providers: [ SpecManager, ScrollService, @@ -23,7 +31,10 @@ import { SpecManager } from './utils/spec-manager'; WarningsService, OptionsService, AppStateService, - { provide: ErrorHandler, useClass: CustomErrorHandler } + ComponentParser, + ContentProjector, + { provide: ErrorHandler, useClass: CustomErrorHandler }, + { provide: COMPONENT_PARSER_ALLOWED, useValue: { 'security-definitions': SecurityDefinitions} } ], exports: [Redoc] }) diff --git a/lib/services/index.ts b/lib/services/index.ts index aafde800..8a33b956 100644 --- a/lib/services/index.ts +++ b/lib/services/index.ts @@ -8,3 +8,6 @@ export * from './hash.service'; export * from './schema-normalizer.service'; export * from './schema-helper.service'; export * from './warnings.service'; + +export * from './component-parser.service'; +export * from './content-projector.service'; diff --git a/lib/services/menu.service.ts b/lib/services/menu.service.ts index eff2c2d3..8db4542c 100644 --- a/lib/services/menu.service.ts +++ b/lib/services/menu.service.ts @@ -141,11 +141,12 @@ export class MenuService { let ptr = decodeURIComponent(hash.substr(namespace.length + 1)); if (namespace === 'operation') { $el = this.getMethodElByOperId(ptr); - } else { + } else if (namespace === 'tag'){ let sectionId = ptr.split('/')[0]; ptr = ptr.substr(sectionId.length) || null; sectionId = namespace + (sectionId ? '/' + sectionId : ''); - $el = this.getMethodElByPtr(ptr, sectionId); + } else { + $el = this.getMethodElByPtr(null, namespace + '/' + ptr); } if ($el) this.scrollService.scrollTo($el); From a94afe5f2d742a9e1b2e2b1f004fe813db69138f Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 09:16:39 +0200 Subject: [PATCH 12/26] Fix error handler --- lib/components/Redoc/redoc.ts | 16 +++++++++++----- lib/utils/custom-error-handler.ts | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/lib/components/Redoc/redoc.ts b/lib/components/Redoc/redoc.ts index 93d76b36..56f72601 100644 --- a/lib/components/Redoc/redoc.ts +++ b/lib/components/Redoc/redoc.ts @@ -67,7 +67,10 @@ export class Redoc extends BaseComponent implements OnInit { } load() { - this.specMgr.load(this.options.specUrl); + this.specMgr.load(this.options.specUrl).catch(err => { + throw err; + }); + this.specMgr.spec.subscribe((spec) => { if (!spec) { this.specLoading = true; @@ -82,12 +85,15 @@ export class Redoc extends BaseComponent implements OnInit { ngOnInit() { this.appState.error.subscribe(_err => { - // do not show errors that occuered after spec has been already loaded - // TODO: change this in future to show in e.g. popup - //if (this.specLoaded) return; + if (!_err) return; + if (this.specLoading) { + this.specLoaded = true; + this.hideLoadingAnimation(); + } + this.error = _err; + this.changeDetector.markForCheck(); setTimeout(() => { - this.error = _err; this.changeDetector.detectChanges() }); }) diff --git a/lib/utils/custom-error-handler.ts b/lib/utils/custom-error-handler.ts index 7df0e7f9..b5cd6fe4 100644 --- a/lib/utils/custom-error-handler.ts +++ b/lib/utils/custom-error-handler.ts @@ -7,7 +7,7 @@ export class CustomErrorHandler extends ErrorHandler { super(true); } handleError(error) { - this.appState.error.next(error); + this.appState.error.next(error && error.rejection || error); super.handleError(error); } } From 9389d7dc15fa4097cbbc50aa9174bd5fd8cf94ac Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 10:15:04 +0200 Subject: [PATCH 13/26] Fix unit tests --- lib/components/ApiInfo/api-info.ts | 2 +- .../security-definitions.scss | 2 +- .../security-definitions.ts | 2 +- lib/services/menu.service.spec.ts | 1 + lib/services/menu.service.ts | 3 ++- lib/utils/md-renderer.ts | 9 ++------- lib/utils/pipes.ts | 2 +- lib/utils/spec-manager.ts | 6 +++++- tests/spec-bundle.js | 19 +++++++++++++++---- 9 files changed, 29 insertions(+), 17 deletions(-) diff --git a/lib/components/ApiInfo/api-info.ts b/lib/components/ApiInfo/api-info.ts index 00a301c6..946b6ff2 100644 --- a/lib/components/ApiInfo/api-info.ts +++ b/lib/components/ApiInfo/api-info.ts @@ -12,7 +12,7 @@ import { OptionsService, MenuService } from '../../services/index'; export class ApiInfo extends BaseComponent implements OnInit { info: any = {}; specUrl: String; - constructor(specMgr:SpecManager, private optionsService: OptionsService) { + constructor(specMgr: SpecManager, private optionsService: OptionsService) { super(specMgr); } diff --git a/lib/components/SecurityDefinitions/security-definitions.scss b/lib/components/SecurityDefinitions/security-definitions.scss index a587e985..37974052 100644 --- a/lib/components/SecurityDefinitions/security-definitions.scss +++ b/lib/components/SecurityDefinitions/security-definitions.scss @@ -10,7 +10,7 @@ h2, h3 { } :host h2 { - margin-top: 40px; + padding-top: 40px; } h3 { diff --git a/lib/components/SecurityDefinitions/security-definitions.ts b/lib/components/SecurityDefinitions/security-definitions.ts index b5cd30fc..0515540f 100644 --- a/lib/components/SecurityDefinitions/security-definitions.ts +++ b/lib/components/SecurityDefinitions/security-definitions.ts @@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy, OnInit, HostListener } from '@angular/core'; import { SpecManager, BaseComponent } from '../base'; -import { ComponentParser } from '../../services/'; +import { ComponentParser } from '../../services/component-parser.service'; const AUTH_TYPES = { 'oauth2': 'OAuth2', diff --git a/lib/services/menu.service.spec.ts b/lib/services/menu.service.spec.ts index a1cc6059..68797fd0 100644 --- a/lib/services/menu.service.spec.ts +++ b/lib/services/menu.service.spec.ts @@ -98,6 +98,7 @@ describe('Menu service', () => { selector: 'test-app', template: `
+
` }) diff --git a/lib/services/menu.service.ts b/lib/services/menu.service.ts index 8db4542c..db7180f4 100644 --- a/lib/services/menu.service.ts +++ b/lib/services/menu.service.ts @@ -141,10 +141,11 @@ export class MenuService { let ptr = decodeURIComponent(hash.substr(namespace.length + 1)); if (namespace === 'operation') { $el = this.getMethodElByOperId(ptr); - } else if (namespace === 'tag'){ + } else if (namespace === 'tag') { let sectionId = ptr.split('/')[0]; ptr = ptr.substr(sectionId.length) || null; sectionId = namespace + (sectionId ? '/' + sectionId : ''); + $el = this.getMethodElByPtr(ptr, sectionId); } else { $el = this.getMethodElByPtr(null, namespace + '/' + ptr); } diff --git a/lib/utils/md-renderer.ts b/lib/utils/md-renderer.ts index 3c89bd67..114a2d71 100644 --- a/lib/utils/md-renderer.ts +++ b/lib/utils/md-renderer.ts @@ -4,8 +4,6 @@ import { Injectable } from '@angular/core'; import * as slugify from 'slugify'; import * as Remarkable from 'remarkable'; -import { SecurityDefinitions } from '../components/'; - declare var Prism: any; const md = new Remarkable({ html: true, @@ -28,15 +26,12 @@ interface HeadersHandler { @Injectable() export class MdRenderer { + public firstLevelHeadings: string[] = []; + private _origRules:any = {}; private _preProcessors:Function[] = []; - public firstLevelHeadings: string[] = []; constructor(private raw: boolean = false) { - // TODO - if (!raw) { - this.addPreprocessor(SecurityDefinitions.insertTagIntoDescription); - } } addPreprocessor(p: Function) { diff --git a/lib/utils/pipes.ts b/lib/utils/pipes.ts index dfe9b95e..47dc5f49 100644 --- a/lib/utils/pipes.ts +++ b/lib/utils/pipes.ts @@ -4,7 +4,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { isString, stringify, isBlank } from './helpers'; import JsonPointer from './JsonPointer'; -import { MdRenderer} from './'; +import { MdRenderer } from './'; import { JsonFormatter } from './JsonFormatterPipe'; declare var Prism: any; diff --git a/lib/utils/spec-manager.ts b/lib/utils/spec-manager.ts index 283d82e3..0b0d5806 100644 --- a/lib/utils/spec-manager.ts +++ b/lib/utils/spec-manager.ts @@ -5,7 +5,7 @@ import { JsonPointer } from './JsonPointer'; import { parse as urlParse, resolve as urlResolve } from 'url'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; -import { MdRenderer } from './'; +import { MdRenderer } from './md-renderer'; export class SpecManager { public _schema: any = {}; @@ -77,6 +77,10 @@ export class SpecManager { preprocess() { let mdRender = new MdRenderer(); if (!this._schema.info.description) this._schema.info.description = ''; + if (this._schema.securityDefinitions) { + let SecurityDefinitions = require('../components/').SecurityDefinitions; + mdRender.addPreprocessor(SecurityDefinitions.insertTagIntoDescription); + } this._schema.info['x-redoc-html-description'] = mdRender.renderMd(this._schema.info.description); this._schema.info['x-redoc-markdown-headers'] = mdRender.firstLevelHeadings; } diff --git a/tests/spec-bundle.js b/tests/spec-bundle.js index 15692b94..e82fbfb0 100644 --- a/tests/spec-bundle.js +++ b/tests/spec-bundle.js @@ -22,11 +22,14 @@ var TestBed = require('@angular/core/testing').TestBed; var ErrorHandler = require('@angular/core').ErrorHandler; var BrowserDynamicTestingModule = require('@angular/platform-browser-dynamic/testing').BrowserDynamicTestingModule; var platformBrowserDynamicTesting = require('@angular/platform-browser-dynamic/testing').platformBrowserDynamicTesting; -var services = require('../lib/services/index'); + var SpecManager = require('../lib/utils/spec-manager').SpecManager; +var services = require('../lib/services/index'); var REDOC_PIPES = require('../lib/utils/pipes').REDOC_PIPES; -var REDOC_COMMON_DIRECTIVES = require('../lib/shared/components/index').REDOC_COMMON_DIRECTIVES; -var REDOC_DIRECTIVES = require('../lib/components/index').REDOC_DIRECTIVES; +var sharedComponents = require('../lib/shared/components/'); +var REDOC_COMMON_DIRECTIVES = sharedComponents.REDOC_COMMON_DIRECTIVES; +var components = require('../lib/components/'); +var REDOC_DIRECTIVES = components.REDOC_DIRECTIVES; TestBed.initTestEnvironment( BrowserDynamicTestingModule, @@ -43,10 +46,18 @@ beforeEach(function() { services.MenuService, services.WarningsService, services.OptionsService, - { provide: ErrorHandler, useClass: services.CustomErrorHandler } + services.ComponentParser, + services.ContentProjector, + { provide: ErrorHandler, useClass: services.CustomErrorHandler }, + { provide: services.COMPONENT_PARSER_ALLOWED, useValue: { 'security-definitions': components.SecurityDefinitions }} ], declarations: [REDOC_PIPES, REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES] }); + TestBed.overrideModule(BrowserDynamicTestingModule, { + set: { + entryComponents: [ sharedComponents.DynamicNg2Wrapper, components.SecurityDefinitions ] + }, + }); }); From 0a2bede7a9ac82245aa993da56b6d778f75253d4 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 10:15:15 +0200 Subject: [PATCH 14/26] Fix e2e --- package.json | 2 +- tests/e2e/redoc.e2e.js | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ac2cea96..109dc6e6 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "karma-webpack": "^1.8.0", "node-sass": "^3.8.0", "phantomjs-prebuilt": "^2.1.7", - "protractor": "^4.0.4", + "protractor": "^4.0.10", "raw-loader": "^0.5.1", "rxjs": "5.0.0-beta.12", "shelljs": "^0.7.0", diff --git a/tests/e2e/redoc.e2e.js b/tests/e2e/redoc.e2e.js index 01c5e940..9bb33066 100644 --- a/tests/e2e/redoc.e2e.js +++ b/tests/e2e/redoc.e2e.js @@ -16,17 +16,24 @@ function basicTests(swaggerUrl, title) { beforeEach((done) => { browser.get(specUrl); fixFFTest(done); + var EC = protractor.ExpectedConditions; + var $apiInfo = $('api-info'); + var $errorMessage = $('.redoc-error') + browser.wait(EC.or(EC.visibilityOf($apiInfo), EC.visibilityOf($errorMessage)), 60000); }); afterEach(() => { verifyNoBrowserErrors(); }); - it('should init redoc without errors', () => { + it('should init redoc without errors', (done) => { let $redoc = $('redoc'); expect($redoc.isPresent()).toBe(true); - let $methods = $$('method'); - expect($methods.count()).toBeGreaterThan(0); + setTimeout(() => { + let $methods = $$('method'); + expect($methods.count()).toBeGreaterThan(0); + done(); + }); }); }); } From 84349a451a611faeacfef5482fe893c732a984e5 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 11:03:15 +0200 Subject: [PATCH 15/26] Fix dev servers and scss files (fixes #97) --- README.md | 4 ---- build/webpack.dev.js | 38 +++++++++++++++++++++++++++++++++----- package.json | 4 +++- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 84d44767..e288f569 100644 --- a/README.md +++ b/README.md @@ -132,10 +132,6 @@ Redoc.init('http://petstore.swagger.io/v2/swagger.json', { `cd ReDoc` - Install dependencies `npm install` -- *(Temporary step, will be obsolete after fixing #97)* Compile CSS -```bash -npm run build:sass -``` - _(optional)_ Replace `demo/swagger.yaml` with your own schema - Start the server `npm start` diff --git a/build/webpack.dev.js b/build/webpack.dev.js index cc6afc4a..449f6d50 100644 --- a/build/webpack.dev.js +++ b/build/webpack.dev.js @@ -1,5 +1,6 @@ const webpack = require('webpack'); const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; +const StringReplacePlugin = require("string-replace-webpack-plugin"); const root = require('./helpers').root; const VERSION = JSON.stringify(require('../package.json').version); @@ -62,6 +63,28 @@ module.exports = { exclude: [ /node_modules/ ] + }, { + enforce: 'pre', + test: /\.ts$/, + exclude: [ + /node_modules/ + ], + loader: StringReplacePlugin.replace({ + replacements: [ + { + pattern: /styleUrls:\s*\[\s*'([\w\.\/-]*)\.css'\s*\][\s,]*$/m, + replacement: function (match, p1, offset, string) { + return `styleUrls: ['${p1}.scss'],`; + } + }, + { + pattern: /(\.\/components\/Redoc\/redoc-initial-styles\.css)/m, + replacement: function (match, p1, offset, string) { + return p1.replace('.css', '.scss'); + } + } + ] + }) }, { test: /\.ts$/, loaders: [ @@ -70,13 +93,16 @@ module.exports = { ], exclude: [/\.(spec|e2e)\.ts$/] }, { - test: /lib[\\\/].*\.css$/, - loaders: ['raw-loader'], - exclude: [/redoc-initial-styles\.css$/] + test: /lib[\\\/].*\.scss$/, + loaders: ['raw-loader', "sass"], + exclude: [/redoc-initial-styles\.scss$/] + }, { + test: /\.scss$/, + loaders: ['style', 'css?-import', "sass"], + exclude: [/lib[\\\/](?!.*redoc-initial-styles).*\.scss$/] }, { test: /\.css$/, loaders: ['style', 'css?-import'], - exclude: [/lib[\\\/](?!.*redoc-initial-styles).*\.css$/] }, { test: /\.html$/, loader: 'raw-loader' @@ -97,6 +123,8 @@ module.exports = { 'AOT': IS_PRODUCTION }), - new ForkCheckerPlugin() + new ForkCheckerPlugin(), + + new StringReplacePlugin() ], } diff --git a/package.json b/package.json index 109dc6e6..9adbc4cb 100644 --- a/package.json +++ b/package.json @@ -82,15 +82,17 @@ "karma-sinon": "^1.0.4", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^1.8.0", - "node-sass": "^3.8.0", + "node-sass": "^3.10.1", "phantomjs-prebuilt": "^2.1.7", "protractor": "^4.0.10", "raw-loader": "^0.5.1", "rxjs": "5.0.0-beta.12", + "sass-loader": "^4.0.2", "shelljs": "^0.7.0", "should": "^11.1.0", "sinon": "^1.17.2", "source-map-loader": "^0.1.5", + "string-replace-webpack-plugin": "0.0.4", "style-loader": "^0.13.1", "ts-helpers": "^1.1.1", "tslint": "^3.15.1", From 9e7ba0ea8d5aab9a1224ca2bfa216d51abba1f5e Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 12:32:03 +0200 Subject: [PATCH 16/26] Deprecate x-traitTag --- docs/redoc-vendor-extensions.md | 2 +- lib/utils/spec-manager.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/redoc-vendor-extensions.md b/docs/redoc-vendor-extensions.md index e12ef1e5..6cda3908 100644 --- a/docs/redoc-vendor-extensions.md +++ b/docs/redoc-vendor-extensions.md @@ -49,7 +49,7 @@ info: ### Tag Object vendor extensions Extends OpenAPI [Tag Object](http://swagger.io/specification/#tagObject) -#### x-traitTag +#### x-traitTag [DEPRECATED] | Field Name | Type | Description | | :------------- | :------: | :---------- | | x-traitTag | boolean | In Swagger two operations can have multiply tags. This property distinguish between tags that are used to group operations (default) from tags that are used to mark operation with certain trait (`true` value) | diff --git a/lib/utils/spec-manager.ts b/lib/utils/spec-manager.ts index 0b0d5806..8027f7d8 100644 --- a/lib/utils/spec-manager.ts +++ b/lib/utils/spec-manager.ts @@ -154,6 +154,9 @@ export class SpecManager { description: tag.description, 'x-traitTag': tag['x-traitTag'] || false }; + if (tag['x-traitTag']) { + console.warn(`x-traitTag (${tag.name}) is deprecated since v1.5.0 and will be removed in the future`); + } } return tagsMap; From 9955cb8fecd4dba9698e45e9d98a2e521f499a14 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 12:32:17 +0200 Subject: [PATCH 17/26] Security definitions docs --- README.md | 3 +++ docs/security-definitions-injection.md | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 docs/security-definitions-injection.md diff --git a/README.md b/README.md index e288f569..533d86d6 100644 --- a/README.md +++ b/README.md @@ -94,6 +94,9 @@ For npm: ## Configuration +### Security Definition location +You can inject Security Definitions widget into any place of your specification `description`. Check out details [here](docs/security-definitions-injection.md). + ### Swagger vendor extensions ReDoc makes use of the following [vendor extensions](http://swagger.io/specification/#vendorExtensions): * [`x-logo`](docs/redoc-vendor-extensions.md#x-logo) - is used to specify API logo diff --git a/docs/security-definitions-injection.md b/docs/security-definitions-injection.md new file mode 100644 index 00000000..84071c07 --- /dev/null +++ b/docs/security-definitions-injection.md @@ -0,0 +1,19 @@ +# Injection security definitions + +You can inject Security Definitions widget into any place of your specification `description`: + +```markdown +... +# Authorization +Some description + + +... +``` +Inject instruction is wrapped into HTML comment so it is **visible only in ReDoc**. It won't be visible e.g. in SwaggerUI. + +# Default behavior +If injection tag is not found in the description it will be appended to the end +of description under `Authentication` header. + +If `Authentication` header is already present in the description, Security Definitions won't be inserted and rendered at all. From ca654511ae09595f3c75aee85820527e6149a1da Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 13:34:42 +0200 Subject: [PATCH 18/26] Fix side menu items wrong sync with description headers --- lib/services/menu.service.ts | 30 ++++++++++++++++++++++++--- lib/services/schema-helper.service.ts | 1 + lib/services/scroll.service.ts | 7 ++++--- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/lib/services/menu.service.ts b/lib/services/menu.service.ts index db7180f4..3ce12357 100644 --- a/lib/services/menu.service.ts +++ b/lib/services/menu.service.ts @@ -41,9 +41,14 @@ export class MenuService { let $activeMethodHost = this.getCurrentMethodEl(); if (!$activeMethodHost) return; var elementInViewPos = this.scrollService.getElementPos($activeMethodHost); - if(isScrolledDown && elementInViewPos === INVIEW_POSITION.BELLOW) { - stable = this.changeActive(CHANGE.NEXT); - continue; + if(isScrolledDown) { + //&& elementInViewPos === INVIEW_POSITION.BELLOW + let $nextEl = this.getRelativeCatOrItem(1); + let nextInViewPos = this.scrollService.getElementPos($nextEl, true); + if (elementInViewPos === INVIEW_POSITION.BELLOW && nextInViewPos === INVIEW_POSITION.ABOVE) { + stable = this.changeActive(CHANGE.NEXT); + continue; + } } if(!isScrolledDown && elementInViewPos === INVIEW_POSITION.ABOVE ) { stable = this.changeActive(CHANGE.BACK); @@ -53,6 +58,25 @@ export class MenuService { } } + getRelativeCatOrItem(offset: number = 0) { + let ptr, cat; + cat = this.categories[this.activeCatIdx]; + if (cat.methods.length === 0) { + ptr = null; + cat = this.categories[this.activeCatIdx + Math.sign(offset)] || cat; + } else { + let cat = this.categories[this.activeCatIdx]; + let idx = this.activeMethodIdx + offset; + if ((idx >= cat.methods.length - 1) || idx < 0) { + cat = this.categories[this.activeCatIdx + Math.sign(offset)] || cat; + idx = offset > 0 ? -1 : cat.methods.length - 1; + } + ptr = cat.methods[idx] && cat.methods[idx].pointer; + } + + return this.getMethodElByPtr(ptr, cat.id); + } + getCurrentMethodEl() { return this.getMethodElByPtr(this.activeMethodPtr, this.categories[this.activeCatIdx].id); diff --git a/lib/services/schema-helper.service.ts b/lib/services/schema-helper.service.ts index dfe96f9b..d720f772 100644 --- a/lib/services/schema-helper.service.ts +++ b/lib/services/schema-helper.service.ts @@ -14,6 +14,7 @@ export interface MenuMethod { active: boolean; summary: string; tag: string; + pointer: string; } export interface MenuCategory { diff --git a/lib/services/scroll.service.ts b/lib/services/scroll.service.ts index bf36f8e9..6b20feab 100644 --- a/lib/services/scroll.service.ts +++ b/lib/services/scroll.service.ts @@ -29,13 +29,14 @@ export class ScrollService { } /* returns 1 if element if above the view, 0 if in view and -1 below the view */ - getElementPos($el) { + getElementPos($el, inverted=false) { let scrollYOffset = this.scrollYOffset(); - if (Math.floor($el.getBoundingClientRect().top) > scrollYOffset) { + let mul = inverted ? -1 : 1; + if (mul*Math.floor($el.getBoundingClientRect().top) > mul*scrollYOffset) { return INVIEW_POSITION.ABOVE; } - if ($el.getBoundingClientRect().bottom <= scrollYOffset) { + if (mul*$el.getBoundingClientRect().bottom <= mul*scrollYOffset) { return INVIEW_POSITION.BELLOW; } return INVIEW_POSITION.INVIEW; From a0771d12c00187fa4b0c092e54db25653181c960 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 19:23:34 +0200 Subject: [PATCH 19/26] Enable markdown for securitydefinition description --- lib/components/SecurityDefinitions/security-definitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/SecurityDefinitions/security-definitions.html b/lib/components/SecurityDefinitions/security-definitions.html index 864f239f..e858c36b 100644 --- a/lib/components/SecurityDefinitions/security-definitions.html +++ b/lib/components/SecurityDefinitions/security-definitions.html @@ -1,7 +1,7 @@

{{def.name}}

-
+
From cef8631b89b78c9659ba85407e02727404a26754 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 19:26:58 +0200 Subject: [PATCH 20/26] Exclude too big spec from e2e --- tests/e2e/redoc.e2e.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/e2e/redoc.e2e.js b/tests/e2e/redoc.e2e.js index 9bb33066..fc296ca2 100644 --- a/tests/e2e/redoc.e2e.js +++ b/tests/e2e/redoc.e2e.js @@ -100,6 +100,7 @@ if (process.env.JOB === 'e2e-guru') { delete apisGuruList['clarify.io']; // non-string references //delete apisGuruList['pushpay.com']; // https://github.com/Rebilly/ReDoc/issues/30 delete apisGuruList['bbci.co.uk']; // too big + delete apisGuruList['bbc.com']; // too big // run quick version of e2e test on all builds except releases if (process.env.TRAVIS && !process.env.TRAVIS_TAG) { From 5b17dc36cf9196d59ee2a92432f2193147ba0839 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 19:27:59 +0200 Subject: [PATCH 21/26] Enable noEmitHelpers in tsconfig --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index c65244fd..950a07a1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,7 @@ "should", "requirejs" ], - "noEmitHelpers": false + "noEmitHelpers": true }, "compileOnSave": false, "exclude": [ From 4aa212547fa117b6e5c209533525b46fd23c8ee1 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 20:15:13 +0200 Subject: [PATCH 22/26] Replace :host from non-angular stylesheet --- lib/components/Redoc/redoc-initial-styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/Redoc/redoc-initial-styles.scss b/lib/components/Redoc/redoc-initial-styles.scss index 1274e620..abb29d88 100644 --- a/lib/components/Redoc/redoc-initial-styles.scss +++ b/lib/components/Redoc/redoc-initial-styles.scss @@ -1,7 +1,7 @@ @import url('//fonts.googleapis.com/css?family=Roboto:300,400,700'); @import url('//fonts.googleapis.com/css?family=Montserrat:400,700'); -:host.loading { +redoc.loading { position: relative; display: block; min-height: 350px; From 1aa9c4a3f21a67b619807393ee79a0ff3df24c68 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Mon, 31 Oct 2016 20:15:56 +0200 Subject: [PATCH 23/26] Fix e2e and unit tests --- lib/services/menu.service.spec.ts | 10 ++-- tests/e2e/index.html | 2 +- tests/e2e/redoc.e2e.js | 15 +++-- tests/schemas/extended-petstore.yml | 89 +++++++++++++---------------- tests/unit/SpecManager.spec.ts | 6 +- 5 files changed, 60 insertions(+), 62 deletions(-) diff --git a/lib/services/menu.service.spec.ts b/lib/services/menu.service.spec.ts index 68797fd0..7720b317 100644 --- a/lib/services/menu.service.spec.ts +++ b/lib/services/menu.service.spec.ts @@ -78,17 +78,17 @@ describe('Menu service', () => { scroll.$scrollParent = document.querySelector('#parent'); menu.activeCatIdx.should.be.equal(0); menu.activeMethodIdx.should.be.equal(-1); - let elTop = menu.getCurrentMethodEl().getBoundingClientRect().bottom; + let nextElTop = menu.getRelativeCatOrItem(1).getBoundingClientRect().top; - scroll.$scrollParent.scrollTop = elTop + 1; + scroll.$scrollParent.scrollTop = nextElTop + 1; //simulate scroll down - spyOn(scroll, 'scrollY').and.returnValue(elTop + 2); + spyOn(scroll, 'scrollY').and.returnValue(nextElTop + 10); menu.scrollUpdate(true); menu.activeCatIdx.should.be.equal(1); - scroll.scrollY.and.returnValue(elTop - 2); - scroll.$scrollParent.scrollTop = elTop - 1; + scroll.scrollY.and.returnValue(nextElTop - 2); + scroll.$scrollParent.scrollTop = nextElTop - 1; menu.scrollUpdate(false); menu.activeCatIdx.should.be.equal(0); }); diff --git a/tests/e2e/index.html b/tests/e2e/index.html index 2653b34f..00af0530 100644 --- a/tests/e2e/index.html +++ b/tests/e2e/index.html @@ -14,7 +14,7 @@