Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2fc8ca0

Browse files
sahrenssahrens
committed
Merge pull request facebook#2517 from sahrens/animatedDocGen
[Docs] Expand API parsing and rendering
2 parents 2acf6e7 + 126928b commit 2fc8ca0

File tree

3 files changed

+124
-50
lines changed

3 files changed

+124
-50
lines changed

‎website/jsdocs/jsdocs.js

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ var genericTransform = require('./generic-function-visitor');
1919
var genericVisitor = genericTransform.visitorList[0];
2020
var traverseFlat = require('./traverseFlat');
2121
var parseTypehint = require('./TypeExpressionParser').parse;
22+
var util = require('util');
2223

2324
// Don't save object properties source code that is longer than this
2425
var MAX_PROPERTY_SOURCE_LENGTH = 1000;
@@ -317,6 +318,7 @@ function getObjectData(node, state, source, scopeChain,
317318
commentsForFile, linesForFile) {
318319
var methods = [];
319320
var properties = [];
321+
var classes = [];
320322
var superClass = null;
321323
node.properties.forEach(function(property) {
322324
if (property.type === Syntax.SpreadProperty) {
@@ -341,7 +343,8 @@ function getObjectData(node, state, source, scopeChain,
341343
scopeChain
342344
);
343345
if (expr) {
344-
if (expr.type === Syntax.FunctionDeclaration) {
346+
if (expr.type === Syntax.FunctionDeclaration ||
347+
expr.type === Syntax.FunctionExpression) {
345348
var functionData =
346349
getFunctionData(expr, property, state, source, commentsForFile,
347350
linesForFile);
@@ -362,23 +365,32 @@ function getObjectData(node, state, source, scopeChain,
362365
}
363366
var docBlock = getDocBlock(property, commentsForFile, linesForFile);
364367
/* CodexVarDef: modifiers, type, name, default, docblock */
365-
var propertyData = [
366-
['static'],
367-
'',
368+
if (property.value.type === Syntax.ClassDeclaration) {
369+
var type = {name: property.value.id.name};
370+
var classData = getClassData(property.value, state, source, commentsForFile, linesForFile);
371+
classData.ownerProperty = property.key.name;
372+
classes.push(classData);
373+
} else {
374+
var type = {name: property.value.type};
375+
}
376+
var propertyData = {
368377
// Cast to String because this can be a Number
369378
// Could also be a String literal (e.g. "key") hence the value
370-
String(property.key.name || property.key.value),
379+
name: String(property.key.name || property.key.value),
380+
type,
381+
docblock: docBlock || '',
382+
source: source.substring.apply(source, property.range),
383+
modifiers: ['static'],
371384
propertySource,
372-
docBlock || '',
373-
property.loc.start.line
374-
];
385+
};
375386
properties.push(propertyData);
376387
break;
377388
}
378389
});
379390
return {
380391
methods: methods,
381392
properties: properties,
393+
classes: classes,
382394
superClass: superClass
383395
};
384396
}
@@ -410,6 +422,7 @@ function getClassData(node, state, source, commentsForFile, linesForFile) {
410422
}
411423
});
412424
var data = {
425+
name: node.id.name,
413426
methods: methods
414427
};
415428
if (node.superClass && node.superClass.type === Syntax.Identifier) {

‎website/layout/AutodocsLayout.js

Lines changed: 101 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,53 +20,52 @@ var slugify = require('slugify');
2020

2121
var styleReferencePattern = /^[^.]+\.propTypes\.style$/;
2222

23-
var ComponentDoc = React.createClass({
24-
renderType: function(type) {
25-
if (type.name === 'enum') {
26-
if (typeof type.value === 'string') {
27-
return type.value;
28-
}
29-
return 'enum(' + type.value.map((v => v.value)).join(', ') + ')';
23+
function renderType(type) {
24+
if (type.name === 'enum') {
25+
if (typeof type.value === 'string') {
26+
return type.value;
3027
}
28+
return 'enum(' + type.value.map((v) => v.value).join(', ') + ')';
29+
}
3130

32-
if (type.name === 'shape') {
33-
return '{' + Object.keys(type.value).map((key => key + ': ' + this.renderType(type.value[key]))).join(', ') + '}';
34-
}
31+
if (type.name === 'shape') {
32+
return '{' + Object.keys(type.value).map((key => key + ': ' + renderType(type.value[key]))).join(', ') + '}';
33+
}
3534

36-
if (type.name == 'union') {
37-
return type.value.map(this.renderType).join(', ');
38-
}
35+
if (type.name == 'union') {
36+
return type.value.map(renderType).join(', ');
37+
}
3938

40-
if (type.name === 'arrayOf') {
41-
return '[' + this.renderType(type.value) + ']';
42-
}
39+
if (type.name === 'arrayOf') {
40+
return '[' + renderType(type.value) + ']';
41+
}
4342

44-
if (type.name === 'instanceOf') {
45-
return type.value;
46-
}
43+
if (type.name === 'instanceOf') {
44+
return type.value;
45+
}
4746

48-
if (type.name === 'custom') {
49-
if (styleReferencePattern.test(type.raw)) {
50-
var name = type.raw.substring(0, type.raw.indexOf('.'));
51-
return <a href={slugify(name) + '.html#style'}>{name}#style</a>
52-
}
53-
if (type.raw === 'EdgeInsetsPropType') {
54-
return '{top: number, left: number, bottom: number, right: number}';
55-
}
56-
return type.raw;
47+
if (type.name === 'custom') {
48+
if (styleReferencePattern.test(type.raw)) {
49+
var name = type.raw.substring(0, type.raw.indexOf('.'));
50+
return <a href={slugify(name) + '.html#style'}>{name}#style</a>
5751
}
58-
59-
if (type.name === 'stylesheet') {
60-
return 'style';
52+
if (type.raw === 'EdgeInsetsPropType') {
53+
return '{top: number, left: number, bottom: number, right: number}';
6154
}
55+
return type.raw;
56+
}
6257

63-
if (type.name === 'func') {
64-
return 'function';
65-
}
58+
if (type.name === 'stylesheet') {
59+
return 'style';
60+
}
6661

67-
return type.name;
68-
},
62+
if (type.name === 'func') {
63+
return 'function';
64+
}
65+
return type.name;
66+
}
6967

68+
var ComponentDoc = React.createClass({
7069
renderProp: function(name, prop) {
7170
return (
7271
<div className="prop" key={name}>
@@ -77,7 +76,7 @@ var ComponentDoc = React.createClass({
7776
{name}
7877
{' '}
7978
{prop.type && <span className="propType">
80-
{this.renderType(prop.type)}
79+
{renderType(prop.type)}
8180
</span>}
8281
</Header>
8382
{prop.type && prop.type.name === 'stylesheet' &&
@@ -128,7 +127,7 @@ var ComponentDoc = React.createClass({
128127
{name}
129128
{' '}
130129
{style.props[name].type && <span className="propType">
131-
{this.renderType(style.props[name].type)}
130+
{renderType(style.props[name].type)}
132131
</span>}
133132
</h6>
134133
</div>
@@ -190,7 +189,6 @@ var ComponentDoc = React.createClass({
190189
<Marked>
191190
{content.description}
192191
</Marked>
193-
194192
<HeaderWithGithub
195193
title="Props"
196194
path={content.filepath}
@@ -264,7 +262,6 @@ var APIDoc = React.createClass({
264262
);
265263
},
266264

267-
268265
renderMethods: function(methods) {
269266
if (!methods.length) {
270267
return null;
@@ -281,6 +278,67 @@ var APIDoc = React.createClass({
281278
);
282279
},
283280

281+
renderProperty: function(property) {
282+
return (
283+
<div className="prop" key={property.name}>
284+
<Header level={4} className="propTitle" toSlug={property.name}>
285+
{property.name}
286+
{property.type &&
287+
<span className="propType">
288+
{': ' + renderType(property.type)}
289+
</span>
290+
}
291+
</Header>
292+
{property.docblock && <Marked>
293+
{this.removeCommentsFromDocblock(property.docblock)}
294+
</Marked>}
295+
</div>
296+
);
297+
},
298+
299+
renderProperties: function(properties) {
300+
if (!properties || !properties.length) {
301+
return null;
302+
}
303+
return (
304+
<span>
305+
<H level={3}>Properties</H>
306+
<div className="props">
307+
{properties.filter((property) => {
308+
return property.name[0] !== '_';
309+
}).map(this.renderProperty)}
310+
</div>
311+
</span>
312+
);
313+
},
314+
315+
renderClasses: function(classes) {
316+
if (!classes || !classes.length) {
317+
return null;
318+
}
319+
return (
320+
<span>
321+
<div>
322+
{classes.filter((cls) => {
323+
return cls.name[0] !== '_' && cls.ownerProperty[0] !== '_';
324+
}).map((cls) => {
325+
return (
326+
<span key={cls.name}>
327+
<Header level={2} toSlug={cls.name}>
328+
class {cls.name}
329+
</Header>
330+
<ul>
331+
{this.renderMethods(cls.methods)}
332+
{this.renderProperties(cls.properties)}
333+
</ul>
334+
</span>
335+
);
336+
})}
337+
</div>
338+
</span>
339+
);
340+
},
341+
284342
render: function() {
285343
var content = this.props.content;
286344
if (!content.methods) {
@@ -294,6 +352,8 @@ var APIDoc = React.createClass({
294352
{this.removeCommentsFromDocblock(content.docblock)}
295353
</Marked>
296354
{this.renderMethods(content.methods)}
355+
{this.renderProperties(content.properties)}
356+
{this.renderClasses(content.classes)}
297357
</div>
298358
);
299359
}
@@ -371,7 +431,7 @@ var Autodocs = React.createClass({
371431
var docs = JSON.parse(this.props.children);
372432
var content = docs.type === 'component' || docs.type === 'style' ?
373433
<ComponentDoc content={docs} /> :
374-
<APIDoc content={docs} />;
434+
<APIDoc content={docs} apiName={metadata.title} />;
375435

376436
return (
377437
<Site section="docs" title={metadata.title}>

‎website/server/extractDocs.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function renderAPI(type) {
134134
try {
135135
json = jsDocs(fs.readFileSync(filepath).toString());
136136
} catch(e) {
137-
console.error('Cannot parse file', filepath);
137+
console.error('Cannot parse file', filepath, e);
138138
json = {};
139139
}
140140
return componentsToMarkdown(type, json, filepath, n++);
@@ -187,6 +187,7 @@ var components = [
187187
var apis = [
188188
'../Libraries/ActionSheetIOS/ActionSheetIOS.js',
189189
'../Libraries/Utilities/AlertIOS.js',
190+
'../Libraries/Animated/Animated.js',
190191
'../Libraries/AppRegistry/AppRegistry.js',
191192
'../Libraries/AppStateIOS/AppStateIOS.ios.js',
192193
'../Libraries/Storage/AsyncStorage.ios.js',

0 commit comments

Comments
 (0)