aggregates examples by their associated component

src/illustrator.js

@@ -4,6 +4,7 @@ import fs from 'fs';
 import path from 'path';
 import dox from 'dox';
 import {parse as parseRectDoc} from 'react-docgen';
+import {find, toRelativeJsPath} from './util';
 
 // ---
 
@@ -34,14 +35,8 @@ export default class Illustrator {
   processComponent(file) {
     return Promise.resolve(file)
       .then(this.record('componentPath'))
-      .then(() => {
-        let componentPath = path.resolve(this.store.examplePath, file);
-        if (!/\.js$/.test(componentPath)) {
-          componentPath += '.js';
-        }
-        return componentPath;
-      })
-      .then(path => fs.readFileSync(path, {encoding: 'utf-8'}))
+      .then(file => toRelativeJsPath(this.store.examplePath, file))
+      .then(file => fs.readFileSync(file, {encoding: 'utf-8'}))
       .then(this.record('componentSource'))
       .then(this.parseComponentDoc)
       .then(this.record('componentDoc'))
@@ -70,14 +65,23 @@ export default class Illustrator {
   }
 
   run() {
+    var component = this.store.componentPath ? Object.assign({
+      name: path.basename(this.store.componentPath, path.extname(this.store.componentPath)),
+      path: path.resolve(this.store.componentPath),
+      source: this.store.componentSource
+    }, this.store.componentDoc) : null;
+
+    var example = {
+      name: this.getCommentTag('name').string,
+      path: path.resolve(this.store.examplePath),
+      requirePath: this.store.exampleRequirePath,
+      description: this.store.exampleDoc.description.full,
+      source: this.store.exampleSource
+    };
+
     return {
-      componentDoc:       this.store.componentDoc,
-      componentPath:      this.store.componentPath,
-      componentSource:    this.store.componentSource,
-      exampleDoc:         this.store.exampleDoc,
-      examplePath:        this.store.examplePath,
-      exampleRequirePath: this.store.exampleRequirePath,
-      exampleSource:      this.store.exampleSource
+      component,
+      example
     };
   }
 

src/index.js

@@ -2,7 +2,7 @@ import path from 'path';
 
 import globby from 'globby';
 import Illustrator from './illustrator';
-import {generateManifest} from './util';
+import {generateManifest, aggregate} from './util';
 
 // ---
 
@@ -11,6 +11,7 @@ export function illustrate(patterns, options) {
 
   let components = globby(patterns, options)
     .then(paths => Promise.all(paths.map(path => illustrateOne(path, options))))
+    .then(aggregate)
   ;
 
   if (options.outputFormat === 'manifest') {

src/util.js

@@ -1,4 +1,3 @@
-
 import path from 'path';
 import fs from 'fs';
 import mkdirp from 'mkdirp';
@@ -22,6 +21,29 @@ export function generateManifest(options, items) {
 
 export function digest(item) {
   var str = JSON.stringify(item);
-  str = str.replace(/\}$/, `,renderer: require('${item.exampleRequirePath}')}`);
+  str = str.replace(/"exampleRequirePath"\s*:\s*("[^"]*")(\s*,?)/, '"renderer":require($1),$&');
   return str;
 }
+
+export function aggregate(items) {
+  let components = {random: {name: 'Random Examples'}};
+
+  for (let item of items) {
+    let component = item.component ? components[item.component.path] : components.random;
+    if (!component) {
+      component = components[item.component.path] = item.component;
+    }
+
+    component.examples ? component.examples.push(item.exmaple) : component.examples = [item.example];
+  }
+
+  return Object.values(components);
+}
+
+export function toRelativeJsPath(base, file) {
+  let jsPath = path.resolve(base, file);
+  if (!/\.js$/.test(jsPath)) {
+    jsPath += '.js';
+  }
+  return jsPath;
+}