diff --git a/.travis.yml b/.travis.yml index bc55b556..0cd1a4d7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -32,7 +32,7 @@ before_script: after_script: - kill %1 # kill e2e server before_deploy: -- npm run build-dist +- npm run build:prod-module deploy: - provider: npm skip_cleanup: true diff --git a/build/webpack.prod.js b/build/webpack.prod.js index ae10a82e..718da7e4 100644 --- a/build/webpack.prod.js +++ b/build/webpack.prod.js @@ -10,7 +10,9 @@ const BANNER = Version: ${VERSION} Repo: https://github.com/Rebilly/ReDoc`; -module.exports = { +const IS_MODULE = process.env.IS_MODULE != null; + +const config = { context: root(), devtool: 'source-map', @@ -35,13 +37,13 @@ module.exports = { setImmediate: false }, entry: { - 'redoc': ['./lib/polyfills.ts', './lib/vendor.ts', './lib/index.ts'] + 'redoc': IS_MODULE ? ['./lib/vendor.ts', './lib/redoc.module.ts'] : ['./lib/polyfills.ts', './lib/vendor.ts', './lib/index.ts'] }, output: { path: root('dist'), - filename: '[name].min.js', - sourceMapFilename: '[name].min.map', + filename: IS_MODULE ? '[name]-module.js' : '[name].min.js', + sourceMapFilename: IS_MODULE ? '[name]-module.map' : '[name].min.map', library: 'Redoc', libraryTarget: 'umd', umdNamedDefine: true @@ -60,9 +62,14 @@ module.exports = { test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: /(node_modules)/ + }, { + test: /lib[\\\/].*\.css$/, + loaders: ['raw-loader'], + exclude: [/redoc-initial-styles\.css$/] }, { test: /\.css$/, - loaders: ['style', 'css?-import'] + loaders: ['style', 'css?-import'], + exclude: [/lib[\\\/](?!.*redoc-initial-styles).*\.css$/] }] }, @@ -90,3 +97,31 @@ module.exports = { }) ], } + +if (IS_MODULE) { + config.externals = { + 'jquery': 'jQuery', + 'esprima': 'esprima', // optional dep of ys-yaml not needed for redoc + '@angular/platform-browser-dynamic': '@angular/platform-browser-dynamic', + '@angular/platform-browser': '@angular/platform-browser', + '@angular/core': '@angular/core', + '@angular/common': '@angular/common', + '@angular/forms': '@angular/forms', + 'core-js': 'core-js', + 'rxjs': 'rxjs', + 'zone.js/dist/zone': 'zone.js/dist/zone' + }; + + config.module.rules.push({ + test: /\.ts$/, + loader: 'angular2-template-loader', + exclude: [/\.(spec|e2e)\.ts$/] + }); + + config.module.rules.push({ + test: /\.html$/, + loader: 'raw-loader' + }); +} + +module.exports = config; diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 0a4bcaa4..8df000b0 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -1,4 +1,4 @@ -
+
diff --git a/lib/components/Redoc/redoc.ts b/lib/components/Redoc/redoc.ts index 73f30c1d..2c659864 100644 --- a/lib/components/Redoc/redoc.ts +++ b/lib/components/Redoc/redoc.ts @@ -1,6 +1,7 @@ 'use strict'; -import { ElementRef, ComponentRef, AfterViewInit, Component, ChangeDetectionStrategy} from '@angular/core'; +import { ElementRef, ComponentRef, ChangeDetectorRef, Input, + Component, OnInit, ChangeDetectionStrategy} from '@angular/core'; import { BrowserDomAdapter as DOM } from '../../utils/browser-adapter'; import { BaseComponent } from '../base'; @@ -16,31 +17,32 @@ import { OptionsService, RedocEventsService } from '../../services/index'; styleUrls: ['./redoc.css'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class Redoc extends BaseComponent implements AfterViewInit { +export class Redoc extends BaseComponent implements OnInit { static appRef: ComponentRef; static _preOptions: any; + specLoaded: boolean; public options: any; private element: any; - static showLoadingAnimation() { - let elem = DOM.query('redoc'); - DOM.addClass(elem, 'loading'); + @Input() specUrl: string; + + // TODO: refactor in separate component/service + showLoadingAnimation() { + DOM.addClass(this.element, 'loading'); } - static hideLoadingAnimation() { - let redocEl = DOM.query('redoc'); - if (!redocEl) return; - DOM.addClass(redocEl, 'loading-remove'); + hideLoadingAnimation() { + DOM.addClass(this.element, 'loading-remove'); setTimeout(() => { - DOM.removeClass(redocEl, 'loading-remove'); - DOM.removeClass(redocEl, 'loading'); + DOM.removeClass(this.element, 'loading-remove'); + DOM.removeClass(this.element, 'loading'); }, 400); } - static displayError(err) { - let redocEl = DOM.query('redoc'); + 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; @@ -51,10 +53,10 @@ export class Redoc extends BaseComponent implements AfterViewInit { } constructor(specMgr: SpecManager, optionsMgr:OptionsService, elementRef:ElementRef, - public events:RedocEventsService) { + public events:RedocEventsService, private changeDetector: ChangeDetectorRef) { super(specMgr); // merge options passed before init - optionsMgr.options = Redoc._preOptions; + optionsMgr.options = Redoc._preOptions || {}; this.element = elementRef.nativeElement; //parse options (top level component doesn't support inputs) optionsMgr.parseOptions( this.element ); @@ -62,12 +64,27 @@ export class Redoc extends BaseComponent implements AfterViewInit { if (scrollParent === DOM.defaultDoc().body) scrollParent = window; optionsMgr.options.$scrollParent = scrollParent; this.options = optionsMgr.options; - this.events = events; } - ngAfterViewInit() { - setTimeout( () => { + 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; + }) + } + + ngOnInit() { + if (this.specUrl) { + this.options.specUrl = this.specUrl; + } + this.load(); } } diff --git a/lib/index.ts b/lib/index.ts index 1ad46f3a..e542152f 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -29,18 +29,11 @@ export function init(specUrl:string, options:any = {}) { Redoc._preOptions = options; options.specUrl = options.specUrl || specUrl; - - Redoc.showLoadingAnimation(); - return SpecManager.instance().load(specUrl) - .then(() => { - return bootstrapRedoc(); - }) + return bootstrapRedoc() .then(appRef => { - Redoc.hideLoadingAnimation(); moduleRef = appRef; console.log('ReDoc initialized!'); }).catch(err => { - Redoc.hideLoadingAnimation(); Redoc.displayError(err); throw err; }); @@ -48,6 +41,7 @@ export function init(specUrl:string, options:any = {}) { export function destroy() { moduleRef.destroy(); + moduleRef = null; }; diff --git a/lib/redoc.module.ts b/lib/redoc.module.ts index 611b0aa8..98f15729 100644 --- a/lib/redoc.module.ts +++ b/lib/redoc.module.ts @@ -21,7 +21,10 @@ import { SpecManager } from './utils/SpecManager'; MenuService, WarningsService, OptionsService - ] + ], + exports: [Redoc] }) export class RedocModule { } + +export { Redoc, SpecManager }; diff --git a/lib/services/schema-helper.service.ts b/lib/services/schema-helper.service.ts index fac99333..be35f3b1 100644 --- a/lib/services/schema-helper.service.ts +++ b/lib/services/schema-helper.service.ts @@ -137,16 +137,16 @@ const injectors = { check: (propertySchema) => (propertySchema.type === 'integer' || propertySchema.type === 'number'), inject: (injectTo, propertySchema = injectTo) => { var range = ''; - if (propertySchema.minimum && propertySchema.maximum) { + if (propertySchema.minimum != undefined && propertySchema.maximum != undefined) { range += propertySchema.exclusiveMinimum ? '( ' : '[ '; range += propertySchema.minimum; range += ' .. '; range += propertySchema.maximum; range += propertySchema.exclusiveMaximum ? ' )' : ' ]'; - } else if (propertySchema.maximum) { + } else if (propertySchema.maximum != undefined) { range += propertySchema.exclusiveMaximum? '< ' : '<= '; range += propertySchema.maximum; - } else if (propertySchema.minimum) { + } else if (propertySchema.minimum != undefined) { range += propertySchema.exclusiveMinimum ? '> ' : '>= '; range += propertySchema.minimum; } @@ -160,11 +160,11 @@ const injectors = { check: propertySchema => (propertySchema.type === 'string'), inject: (injectTo, propertySchema = injectTo) => { var range; - if (propertySchema.minLength && propertySchema.maxLength) { + if (propertySchema.minLength != undefined && propertySchema.maxLength != undefined) { range = `[ ${propertySchema.minLength} .. ${propertySchema.maxLength} ]`; - } else if (propertySchema.maxLength) { + } else if (propertySchema.maxLength != undefined) { range = '<= ' + propertySchema.maxLength; - } else if (propertySchema.minLength) { + } else if (propertySchema.minLength != undefined) { range = '>= ' + propertySchema.minLength; } diff --git a/lib/utils/SpecManager.ts b/lib/utils/SpecManager.ts index 1c4032d5..11f647b5 100644 --- a/lib/utils/SpecManager.ts +++ b/lib/utils/SpecManager.ts @@ -30,10 +30,14 @@ export class SpecManager { JsonSchemaRefParser.bundle(url, {http: {withCredentials: false}}) .then(schema => { + try { this._url = url; this._schema = schema; this.init(); - return resolve(this._schema); + resolve(this._schema); + } catch(err) { + reject(err); + } }, err => reject(err)); }); diff --git a/package.json b/package.json index 6f84ef02..953c42a5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "redoc", "description": "Swagger-generated API Reference Documentation", - "version": "1.3.3", + "version": "1.4.0", "repository": { "type": "git", "url": "git://github.com/Rebilly/ReDoc" @@ -22,6 +22,7 @@ "webpack:prod": "webpack --config build/webpack.prod.js --profile --bail", "build:sass": "node-sass -q -o lib lib", "build:prod": "npm run build:sass && npm run ngc && npm run webpack:prod", + "build:prod-module": "npm run build:sass && npm run ngc && npm run webpack:prod && IS_MODULE=true 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", @@ -44,7 +45,13 @@ "author": "Roman Hotsiy", "license": "MIT", "devDependencies": { - "@angular/compiler-cli": "^0.6.3", + "@angular/common": "^2.1.0", + "@angular/compiler": "^2.1.0", + "@angular/compiler-cli": "^2.1.0", + "@angular/core": "^2.1.0", + "@angular/platform-browser": "^2.1.0", + "@angular/platform-browser-dynamic": "^2.1.0", + "@angular/platform-server": "^2.1.0", "@types/core-js": "^0.9.31", "@types/jasmine": "^2.2.32", "@types/requirejs": "^2.1.26", @@ -53,8 +60,9 @@ "awesome-typescript-loader": "^2.2.1", "branch-release": "^1.0.3", "chalk": "^1.1.3", - "codelyzer": "^1.0.0-beta.0", + "codelyzer": "^1.0.0-beta.2", "copy-webpack-plugin": "^3.0.1", + "core-js": "^2.4.1", "coveralls": "^2.11.9", "css-loader": "^0.24.0", "deploy-to-gh-pages": "^1.1.2", @@ -78,6 +86,7 @@ "phantomjs-prebuilt": "^2.1.7", "protractor": "^4.0.4", "raw-loader": "^0.5.1", + "rxjs": "^5.0.0-beta.12", "shelljs": "^0.7.0", "should": "^11.1.0", "sinon": "^1.17.2", @@ -88,16 +97,10 @@ "tslint-stylish": "^2.1.0-beta", "typescript": "^2.0.3", "webpack": "^2.1.0-beta.25", - "webpack-dev-server": "^2.1.0-beta.6" + "webpack-dev-server": "^2.1.0-beta.6", + "zone.js": "^0.6.25" }, "dependencies": { - "@angular/common": "^2.0.1", - "@angular/compiler": "^2.0.1", - "@angular/core": "^2.0.1", - "@angular/platform-browser": "^2.0.1", - "@angular/platform-browser-dynamic": "^2.0.1", - "@angular/platform-server": "^2.0.1", - "core-js": "^2.4.1", "dropkickjs": "^2.1.10", "hint.css": "^2.3.2", "json-pointer": "^0.5.0", @@ -105,10 +108,19 @@ "openapi-sampler": "^0.3.1", "prismjs": "^1.5.1", "remarkable": "^1.6.2", - "rxjs": "^5.0.0-beta.12", "scrollparent": "^1.0.0", "slugify": "^1.0.2", - "stream-http": "^2.3.1", + "stream-http": "^2.3.1" + }, + "peerDependencies": { + "@angular/common": "^2.1.0", + "@angular/compiler": "^2.1.0", + "@angular/core": "^2.1.0", + "@angular/platform-browser": "^2.1.0", + "@angular/platform-browser-dynamic": "^2.1.0", + "@angular/platform-server": "^2.1.0", + "core-js": "^2.4.1", + "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.25" } }