Merge pull request #6 from szarouski/developer

add an option to add JSX component code example before source_example

Author: Sergey Zarouski

README.md

@@ -134,3 +134,17 @@ In order to show just JSX markup, instead of rendered markup, you can use `.src-
     </div>
 </section>
 ```
+
+Alternatively you can import `sourcejs-react/SourceExample.jsx`:
+```js
+var SourceExample = require('sourcejs-react/SourceExample.jsx');
+```
+and use it like in example below inside render method, code block will be auto-generated for you:
+```html
+<section className="source_section">
+    <h2>Button (Purple)</h2>
+    <SourceExample extraClasses="you addition class names">
+      <Button color="purple">Btn Copy Gibson Reg; 1.2em</Button>
+    </SourceExample>
+</section>
+```

SourceExample.jsx

@@ -0,0 +1,21 @@
+'use strict';
+var React = require('react/addons');
+module.exports = React.createClass({
+	displayName: 'SourceExample',
+	propTypes: {
+		children: React.PropTypes.element.isRequired,
+		extraClasses: React.PropTypes.string
+	},
+	getDefaultProps: function getDefaultProps() {
+		return {
+			extraClasses: ''
+		};
+	},
+	render: function render() {
+		return (
+			<div className={`source_example ${this.props.extraClasses}`}>
+				{this.props.children}
+			</div>
+		);
+	}
+});

core/middleware/index.js

@@ -2,7 +2,9 @@
 
 require('node-jsx').install({extension: '.jsx', harmony: true});
 var React = require('react/addons');
+var JSXTransformer = require('react/dist/JSXTransformer');
 var path = require('path');
+var fs = require('fs');
 var _ = require('lodash');
 
 /*
@@ -22,7 +24,17 @@ exports.process = function (req, res, next) {
         var pathToFile = path.join(global.app.get('user'), req.url);
         var html;
         try {
-            var component = React.createFactory(require(pathToFile));
+            var matchingPattern = /<SourceExample((?:.|\n)*?)>\s*((?:.|\n)+?)\n\s*?<\/SourceExample>/g;
+            //noinspection HtmlUnknownAttribute
+            var replacementPattern = '<code className="src-html source_visible">{`$2`}</code>' +
+                '<SourceExample$1>$2</SourceExample>';
+            var specContents = fs.readFileSync(pathToFile, {
+                encoding: 'utf-8'
+            }).replace(matchingPattern, replacementPattern);
+            specContents = JSXTransformer.transform(specContents, {
+                harmony: true
+            }).code;
+            var component = React.createFactory(requireCode(specContents, pathToFile));
             html = getHtml(component);
         } catch (ex) {
             html = getErrorAsHtml(ex);
@@ -33,6 +45,30 @@ exports.process = function (req, res, next) {
     next();
 };
 
+function requireCode(code, pathToCode) {
+    var path = require('path');
+    var Module = require('module').Module;
+
+    var filepath = path.resolve(process.cwd(), pathToCode);
+    var dirname = path.dirname(filepath);
+
+    var cachedModule = Module._cache[filepath];
+    if (cachedModule) {
+        return cachedModule.exports;
+    }
+
+    var mod = new Module(filepath, module);
+    Module._cache[filepath] = mod;
+
+    mod.filename = filepath;
+    mod.paths = Module._nodeModulePaths(dirname);
+
+    mod._compile(code, filepath);
+    mod.loaded = true;
+
+    return mod.exports;
+}
+
 function getHtml(component) {
     try {
         return React.renderToString(component({}));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sourcejs-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React middleware for sourcejs.com",
   "main": "index.js",
   "dependencies": {