update options structure - use relative paths and search for *.jsx by default

Author: robhrt7

Readme.md

@@ -25,13 +25,11 @@ After re-running your SourceJS app, plugin will be loaded automatically.
 Configure path to components in SourceJS `options.js` file:
 
 ```javascript
-var path = require('path');
-
 module.exports = {
 	plugins: {
 		reactStyleguidist: {
-			rootDir: path.join(global.userPath, 'specs'),
-			components: './**/*.js'
+			rootDir: './relative/path/to/components',
+			components: './**/*.jsx'
 		}
 	}
 };
@@ -83,10 +81,10 @@ Use SourceJS `options.js` for deep plugin configuration.
   - when `String`: a [glob pattern](https://github.com/isaacs/node-glob#glob-primer) that matches all your component modules. Relative to the `rootDir`.
   - when `Function`: function that returns an array of modules.
 
-  If your components look like `components/Button.js` or `components/Button/Button.js` or `components/Button/index.js`:
+  If your components look like `components/Button.jsx` or `components/Button/Button.jsx` or `components/Button/index.jsx`:
 
   ```javascript
-  components: './components/**/*.js',
+  components: './components/**/*.jsx'
   ```
 
   If your components look like `components/Button/Button.js` + `components/Button/index.js`:

core/middleware/index.js

@@ -16,11 +16,13 @@ var processRequest = function (req, res, next) {
     // Check if request is targeting Spec
     if (req.specData && req.specData.renderedHtml && req.specData.info.role !== 'navigation') {
 		var append;
+		var pathToStyleguide = config._styleguideDir.replace(/^\./, '');
+		var pathToBundle = config.bundlePath.replace(/^\./, '');
 
 		if (global.MODE === 'development') {
 			append = '<script src="/'+ config.bundlePath +'"></script>'
 		} else {
-			append = '<link rel="stylesheet" href="/build/styleguide/build/styles.css"><script src="/build/styleguide/' + config.bundlePath + '"></script>'
+			append = '<link rel="stylesheet" href="' + pathToStyleguide + '/build/styles.css"><script src="' + pathToStyleguide + pathToBundle + '"></script>'
 		}
 
 		req.specData.renderedHtml += append;

src/utils/config.js

@@ -18,15 +18,15 @@ if (global.pathToApp) {
 
 var config = {
 	enabled: true,
-	bundlePath: 'build/bundle.js',
+	bundlePath: './build/bundle.js',
 
 	// Public object is exposed to Front-end via options API.
 	public: {},
 
 	// Original styleguidist options
-	rootDir: path.join(pathToSourceJSUser, 'specs'),
-	components: './**/*.js',
-	styleguideDir: path.join(pathToSourceJSUser, 'build/styleguide'),
+	rootDir: './specs',
+	components: './**/*.jsx',
+	styleguideDir: './build/styleguide',
 
 	highlightTheme: 'base16-light',
 	verbose: false,
@@ -58,9 +58,12 @@ function readConfig() {
 
 	options = _.merge({}, options, customConfig);
 
-	if (customConfig) {
-		options.rootDir = path.resolve(path.dirname(configFilepath), options.rootDir);
-	}
+	// Extend config
+	options._rootDir = config.rootDir;
+	options.rootDir = path.join(pathToSourceJSUser, config.rootDir);
+
+	options._styleguideDir = config.styleguideDir;
+	options.styleguideDir = path.join(pathToSourceJSUser, config.styleguideDir);
 
 	validateConfig(options);