Store typedef on the helper and use it to show a parameter list

gatsby-node.js

@@ -3,7 +3,7 @@ function getDocs() {
   // TODO: build if not present
   const info = require('./build/api-info.json');
 
-  return info.docs.filter(doc => !doc.ignore && (doc.api || doc.kind === 'module'));
+  return info.docs.filter(doc => !doc.ignore && (doc.api || doc.kind === 'module' || doc.kind === 'typedef'));
 }
 
 function createPages({actions: {createPage}}) {

site/components/Class.jsx

@@ -2,8 +2,9 @@ import {object} from 'prop-types';
 import React from 'react';
 import Markdown from 'react-markdown';
 import Code from './Code';
+import Parameter from './Parameter';
 
-function Class({cls, module}) {
+function Class({cls, module, helper}) {
   const exportedName = module.getExportedName(cls.name);
   let importCode;
   if (exportedName === 'default') {
@@ -17,13 +18,18 @@ function Class({cls, module}) {
       <h3>{cls.name}</h3>
       <Code value={importCode} />
       <Markdown source={cls.doc.classdesc} renderers={{code: Code}} />
+      <h6>Parameters</h6>
+      <ul>
+        {cls.doc.params && cls.doc.params.map(param => <Parameter param={param} module={module} helper={helper} />)}
+      </ul>
     </div>
   );
 }
 
 Class.propTypes = {
   cls: object.isRequired,
-  module: object.isRequired
+  module: object.isRequired,
+  helper: object.isRequired
 };
 
 export default Class;

site/components/Func.jsx

@@ -2,8 +2,9 @@ import {object} from 'prop-types';
 import React from 'react';
 import Markdown from 'react-markdown';
 import Code from './Code';
+import Parameter from './Parameter';
 
-function Func({func, module}) {
+function Func({func, module, helper}) {
   const exportedName = module.getExportedName(func.name);
   let importCode;
   if (exportedName === 'default') {
@@ -17,13 +18,18 @@ function Func({func, module}) {
       <h3>{func.name}</h3>
       <Code value={importCode} />
       <Markdown source={func.doc.description} renderers={{code: Code}} />
+      <h6>Parameters</h6>
+      <ul>
+        {func.doc.params && func.doc.params.map(param => <Parameter param={param} module={module} helper={helper} />)}
+      </ul>
     </div>
   );
 }
 
 Func.propTypes = {
   func: object.isRequired,
-  module: object.isRequired
+  module: object.isRequired,
+  helper: object.isRequired
 };
 
 export default Func;

site/components/Module.jsx

@@ -3,23 +3,24 @@ import React from 'react';
 import Class from './Class';
 import Func from './Func';
 
-function Module({module}) {
+function Module({module, helper}) {
   return (
     <div>
       <hr />
       <h2>{module.id}</h2>
       {module.classes.map(cls => (
-        <Class key={cls.name} cls={cls} module={module} />
+        <Class key={cls.name} cls={cls} module={module} helper={helper} />
       ))}
       {module.functions.map(func => (
-        <Func key={func.name} func={func} module={module} />
+        <Func key={func.name} func={func} module={module} helper={helper} />
       ))}
     </div>
   );
 }
 
 Module.propTypes = {
-  module: object.isRequired
+  module: object.isRequired,
+  helper: object.isRequired
 };
 
 export default Module;

site/components/Parameter.jsx

@@ -0,0 +1,20 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Type from './Type';
+
+function Parameter({param, module, helper}) {
+  return (
+    <li>
+      <code>{param.name}</code> - {param.description} {param.optional && <span>(optional)</span>}<br/>
+      {param.type.names.map(longName => <Type longName={longName} module={module} helper={helper} />)}
+    </li>
+  );
+}
+
+Parameter.propTypes = {
+  param: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Parameter;

site/pages/API.js

@@ -13,7 +13,7 @@ function API({pageContext: {docs}}) {
       {helper.modules
         .filter(module => module.visible)
         .map(module => (
-          <Module key={module.id} module={module} />
+          <Module key={module.id} module={module} helper={helper} />
         ))}
     </Page>
   );

site/util/api.js

@@ -5,6 +5,13 @@ class FunctionDoc {
   }
 }
 
+class TypedefDoc {
+  constructor(doc) {
+    this.name = doc.name;
+    this.doc = doc;
+  }
+}
+
 class ClassDoc {
   constructor(name) {
     this.name = name;
@@ -31,6 +38,7 @@ class ModuleDoc {
   processDoc(doc) {
     if (doc.kind === 'module') {
       this.doc = doc;
+      //console.log('processing module: ' + doc.longname)
       return;
     }
 
@@ -94,7 +102,7 @@ function moduleIDFromLongname(longname) {
   return match.groups.module;
 }
 
-function nameFromLongname(longname) {
+export function nameFromLongname(longname) {
   const match = longname.match(longnameRE);
   if (!match) {
     throw new Error(`could not match name in longname: ${longname}`);
@@ -146,7 +154,20 @@ class DocHelper {
     this.moduleLookup = {};
     this.modules = [];
 
+    this.typedefLookup = {};
+
     docs.forEach(doc => {
+      // typedef are indexed by long name
+      if (doc.kind === 'typedef') {
+        if (doc.name in this.typedefLookup) {
+          throw new Error(`Duplicate type definition ${doc.name} in ${this.id}`);
+        }
+
+        const type = new TypedefDoc(doc);
+        this.typedefLookup[doc.longname] = type;
+        return;
+      }
+
       const moduleID = moduleIDFromLongname(doc.longname);
       if (!(moduleID in this.moduleLookup)) {
         const module = new ModuleDoc(moduleID);
@@ -161,6 +182,11 @@ class DocHelper {
     this.modules.sort(byModuleId);
     this.modules.forEach(module => module.finalize());
   }
+
+  getTypeDef(longName) {
+    this.typedefLookup[longName] && console.log(this.typedefLookup[longName]);
+    return this.typedefLookup[longName];
+  }
 }
 
 let cachedDocs;