Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-10 19:06:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Moved duplicated code into base class/decorator

Browse Source
This commit is contained in:
Roman Gotsiy 2015-10-09 23:19:35 +03:00
parent c8d04cc1fa
commit a2fe4c9ca4
8 changed files with 119 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/index.html
View File

@ -4,7 +4,7 @@
<title>ReDoc prototype</title> <title>ReDoc prototype</title>
</head> </head>
<body> <body>
<!-- The wrapper component--> <!-- The wrapper component -->
<redoc> <redoc>
Loading... Loading...
</redoc> </redoc>
@ -12,7 +12,7 @@
<!-- ReDoc built file with all dependencies included --> <!-- ReDoc built file with all dependencies included -->
<script src="dist/redoc.full.js"> </script> <script src="dist/redoc.full.js"> </script>
<script> <script>
//init redoc /* init redoc */
Redoc.init('petstore.json'); Redoc.init('petstore.json');
</script> </script>
</body> </body>

25
lib/components/ApiInfo/api-info.js
View File

@ -1,27 +1,18 @@
'use strict'; 'use strict';
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'; import {RedocComponent, BaseComponent} from '../base';
import {SchemaManager} from '../../utils/SchemaManager';
@Component({ @RedocComponent({
selector: 'api-info' selector: 'api-info',
})
@View({
templateUrl: './lib/components/ApiInfo/api-info.html',
styleUrls: ['./lib/components/ApiInfo/api-info.css'], styleUrls: ['./lib/components/ApiInfo/api-info.css'],
directives: [CORE_DIRECTIVES] templateUrl: './lib/components/ApiInfo/api-info.html'
}) })
export class ApiInfo { export class ApiInfo extends BaseComponent {
constructor(schemaMgr) { constructor(schemaMgr) {
this.data = null; super(schemaMgr);
this.schema = schemaMgr.schema;
this.extractData();
} }
extractData() { prepareModel() {
this.data = this.schema.info; this.data = this.componentSchema.info;
//TODO: check and apply hooks to modify data
} }
} }
ApiInfo.parameters = [[SchemaManager]];

29
lib/components/Method/method.js
View File

@ -1,36 +1,21 @@
'use strict'; 'use strict';
import {Component, View, OnInit, CORE_DIRECTIVES} from 'angular2/angular2';
import {SchemaManager} from '../../utils/SchemaManager';
import {JsonPointer} from '../../utils/JsonPointer'; import {JsonPointer} from '../../utils/JsonPointer';
import {RedocComponent, BaseComponent} from '../base';
@Component({ @RedocComponent({
selector: 'method', selector: 'method',
properties: ['pointer'], templateUrl: './lib/components/Method/method.html'
lifecycle: [OnInit]
}) })
@View({ export class Method extends BaseComponent {
templateUrl: './lib/components/Method/method.html',
directives: [CORE_DIRECTIVES]
})
export class Method {
constructor(schemaMgr) { constructor(schemaMgr) {
this.data = null; super(schemaMgr);
this.schemaMgr = schemaMgr;
} }
onInit() { prepareModel() {
this.extractData();
}
extractData() {
this.data = {}; this.data = {};
var methodInfo = this.schemaMgr.byPointer(this.pointer);
this.data.method = JsonPointer.baseName(this.pointer); this.data.method = JsonPointer.baseName(this.pointer);
this.data.path = JsonPointer.baseName(this.pointer, 2); this.data.path = JsonPointer.baseName(this.pointer, 2);
this.data.methodInfo = methodInfo; this.data.methodInfo = this.componentSchema;
//TODO: check and apply hooks to modify data
} }
} }
Method.parameters = [[SchemaManager]];

29
lib/components/MethodsList/methods-list.js
View File

@ -1,39 +1,24 @@
'use strict'; 'use strict';
import {Component, View, OnInit, CORE_DIRECTIVES} from 'angular2/angular2'; import {RedocComponent, BaseComponent} from '../base';
import {SchemaManager} from '../../utils/SchemaManager';
import {methods as swaggerMethods} from '../../utils/swagger-defs'; import {methods as swaggerMethods} from '../../utils/swagger-defs';
import {Method} from '../Method/method'; import {Method} from '../Method/method';
@Component({ @RedocComponent({
selector: 'methods-list', selector: 'methods-list',
properties: ['pointer'],
lifecycle: [OnInit]
})
@View({
templateUrl: './lib/components/MethodsList/methods-list.html', templateUrl: './lib/components/MethodsList/methods-list.html',
directives: [CORE_DIRECTIVES, Method] directives: [Method]
}) })
export class MethodsList { export class MethodsList extends BaseComponent {
_name: string;
constructor(schemaMgr) { constructor(schemaMgr) {
this.data = null; super(schemaMgr);
this.schemaMgr = schemaMgr;
//this.pointer = pointer;
//this.extractData();
} }
onInit() { prepareModel() {
this.extractData();
}
extractData() {
this.data = {}; this.data = {};
var pathInfo = this.schemaMgr.byPointer(this.pointer); let pathInfo = this.componentSchema;
this.data.methods = Object.keys(pathInfo).filter((k) => swaggerMethods.has(k)); this.data.methods = Object.keys(pathInfo).filter((k) => swaggerMethods.has(k));
//TODO: check and apply hooks to modify data
} }
} }
MethodsList.parameters = [[SchemaManager]];

26
lib/components/PathsList/paths-list.js
View File

@ -1,30 +1,20 @@
'use strict'; 'use strict';
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'; import {RedocComponent, BaseComponent} from '../base';
import {SchemaManager} from '../../utils/SchemaManager';
import {MethodsList} from '../MethodsList/methods-list'; import {MethodsList} from '../MethodsList/methods-list';
import {JsonPointerEscapePipe} from '../../utils/pipes';
@Component({ @RedocComponent({
selector: 'paths-list' selector: 'paths-list',
})
@View({
templateUrl: './lib/components/PathsList/paths-list.html', templateUrl: './lib/components/PathsList/paths-list.html',
directives: [CORE_DIRECTIVES, MethodsList], directives: [MethodsList]
pipes: [JsonPointerEscapePipe]
}) })
export class PathsList { export class PathsList extends BaseComponent {
constructor(schemaMgr) { constructor(schemaMgr) {
this.data = null; super(schemaMgr);
this.schema = schemaMgr.schema;
this.extractData();
} }
extractData() { prepareModel() {
this.data = {}; this.data = {};
this.data.paths = Object.keys(this.schema.paths); this.data.paths = Object.keys(this.componentSchema.paths);
//TODO: check and apply hooks to modify data
} }
} }
PathsList.parameters = [[SchemaManager]];

20
lib/components/Redoc/redoc.js
View File

@ -1,28 +1,18 @@
'use strict'; 'use strict';
import {Component, View} from 'angular2/angular2'; import {RedocComponent, BaseComponent} from '../base';
import {SchemaManager} from '../../utils/SchemaManager'; import {SchemaManager} from '../../utils/SchemaManager';
import {ApiInfo} from '../ApiInfo/api-info'; import {ApiInfo} from '../ApiInfo/api-info';
import {PathsList} from '../PathsList/paths-list'; import {PathsList} from '../PathsList/paths-list';
@Component({ @RedocComponent({
selector: 'redoc', selector: 'redoc',
bindings: [SchemaManager] bindings: [SchemaManager],
})
@View({
templateUrl: './lib/components/Redoc/redoc.html', templateUrl: './lib/components/Redoc/redoc.html',
directives: [ApiInfo, PathsList] directives: [ApiInfo, PathsList]
}) })
export class Redoc { export class Redoc extends BaseComponent {
constructor(schemaMgr) { constructor(schemaMgr) {
this.data = null; super(schemaMgr);
this.schema = schemaMgr.schema;
this.extractData();
}
extractData() {
this.data = this.schema;
//TODO: check and apply hooks to modify data
} }
} }
Redoc.parameters = [[SchemaManager]];

81
lib/components/base.js Normal file
View File

@ -0,0 +1,81 @@
'use strict';
import {Component, View, OnInit, CORE_DIRECTIVES} from 'angular2/angular2';
import {SchemaManager} from '../utils/SchemaManager';
import {JsonPointerEscapePipe} from '../utils/pipes';
// common inputs for all components
let commonInputs = ['pointer']; // json pointer to the schema chunk
// internal helper function
function safeConcat(a, b) {
let res = a && a.slice() || [];
b = (b == null) ? [] : b;
return res.concat(b);
}
/**
* Class decorator
* Simplifies setup of component metainfo
* All options are options from either Component or View angular2 decorator
* For detailed info look angular2 doc
* @param {Object} options - component options
* @param {string[]} options.inputs - component inputs
* @param {*[]} options.directives - directives used by component
* (except CORE_DIRECTIVES)
* @param {*[]} options.pipes - pipes used by component
* @param {*[]} options.bindings - component bindings
* @param {string} options.templateUrl - path to component template
* @param {string} options.template - component template html
* @param {string} options.styles - component css styles
*/
export function RedocComponent(options) {
let inputs = safeConcat(options.inputs, commonInputs);
let directives = safeConcat(options.directives, CORE_DIRECTIVES);
let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe]);
return function decorator(target) {
let componentDecorator = Component({
selector: options.selector,
inputs: inputs,
lifecycle: [OnInit],
bindings: options.bindings
});
let viewDecorator = View({
templateUrl: options.templateUrl,
template: options.template,
styles: options.styles,
directives: directives,
pipes: pipes
});
return componentDecorator(viewDecorator(target) || target) || target;
};
}
/**
* Generic Component
* @class
*/
export class BaseComponent {
constructor(schemaMgr) {
this.schemaMgr = schemaMgr;
this.schema = schemaMgr.schema;
this.componentSchema = null;
}
/**
* onInit method is run by angular2 after all component inputs are resolved
*/
onInit() {
this.componentSchema = this.schemaMgr.byPointer(this.pointer || '');
this.prepareModel();
}
/**
* Used to prepare model based on component schema
* @abstract
*/
prepareModel() {}
}
BaseComponent.parameters = [[SchemaManager]];

2
lib/utils/JsonPointer.js
View File

@ -16,7 +16,7 @@ export class JsonPointer extends JsonPointerLib {
* JsonPointerHelper.baseName('/path/foo/subpath', 2) * JsonPointerHelper.baseName('/path/foo/subpath', 2)
*/ */
static baseName(pointer, level=1) { static baseName(pointer, level=1) {
var tokens = JsonPointer.parse(pointer); let tokens = JsonPointer.parse(pointer);
return tokens[tokens.length - (level)]; return tokens[tokens.length - (level)];
} }
} }