added react to main lib. But test fixtures not done

tj · Feb 23, 2015 · edfff17 · edfff17
1 parent e89297a
commit edfff17
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 70 deletions.
diff --git a/Readme.md b/Readme.md
@@ -32,6 +32,7 @@
   - [nunjucks](https://github.com/mozilla/nunjucks) [(website)](https://mozilla.github.io/nunjucks)
   - [QEJS](https://github.com/jepso/QEJS)
   - [ractive](https://github.com/Rich-Harris/Ractive)
+  - [react](https://github.com/facebook/react)
   - [swig](https://github.com/paularmstrong/swig) [(website)](http://paularmstrong.github.com/swig/)
   - [templayed](http://archan937.github.com/templayed.js/)
   - [liquid](https://github.com/leizongmin/tinyliquid) [(website)](http://liquidmarkup.org/)
@@ -134,6 +135,7 @@ console.log('Express server listening on port 3000');
 * To use **filters** with tinyliquid, use `options.filters` and specify an array of properties, each of which is a named filter function. A filter function takes a string as a parameter and returns a modified version of it.
 * To use **custom tags** with tinyliquid, use `options.customTags` to specify an array of tag functions that follow the tinyliquid [custom tag](https://github.com/leizongmin/tinyliquid/wiki/Custom-Tag) definition.
 * The default directory used with the **include** tag with tinyliquid is the current working directory. To override this, use `options.includeDir`.
+* To use a html base template (eg. `index.html` of your React app) with your `react`, pass the path to the template using a `options.base`.
 
 ## Running tests
 

diff --git a/lib/consolidate.js b/lib/consolidate.js
@@ -20,6 +20,7 @@
 var fs = require('fs')
   , path = require('path')
   , join = path.join
+  , resolve = path.resolve
   , extname = path.extname
   , dirname = path.dirname;
 
@@ -958,54 +959,99 @@ exports.htmling.render = function(str, options, fn) {
 };
 
 
+/**
+ *  Rendering function 
+ */
+function requireReact(module, filename) {
+  var tools = requires.reactTools || (requires.reactTools = require('react-tools'));
+
+  var content = fs.readFileSync(filename, 'utf8');
+  var compiled = tools.transform(content, {harmony: true});
+
+  return module._compile(compiled, filename);
+};
+
+exports.requireReact = requireReact;
+
 
 /**
- * React JS Support
+ *  Converting a string into a node module.
  */
-exports.reactjs = fromStringRenderer('reactjs');
+function requireReactString(src, filename) {
+  var tools = requires.reactTools || (requires.reactTools = require('react-tools'));
+  var m = new module.constructor();
+
+  // Compile Using React
+  src = tools.transform(src, {harmony: true});
+
+  // Compile as a module
+  m.paths = module.paths;
+  m._compile(src, filename);
+
+  return m.exports;
+}
+
 
 /**
- * React JS string support.
+ *  Converting a string into a node module.
  */
-exports.reactjs.render = function(str, options, fn) {
-
+function reactRenderer(type){
   // Ensure JSX is transformed on require
-  var ReactTools = require('react-tools');
-  require.extensions['.jsx'] = function(module, filename) {
-    var content = fs.readFileSync(filename, 'utf8');
-    var compiled = ReactTools.transform(content, {harmony: true});
-    return module._compile(compiled, filename);
-  };
+  if (!require.extensions['.jsx']) require.extensions['.jsx'] = requireReact;
 
+  // Return rendering fx
+  return function(str, options, fn) {
 
-  // React Import
-  var engine = requires.reactjs || (requires.reactjs = require('react'));
+    // React Import
+    var engine = requires.react || (requires.react = require('react'));
 
-  // Assign HTML 
-  var layout = options.layout;
-  delete options.layout;
+    // Assign HTML Base
+    var base = options.base;
+    delete options.base;
 
-  // Parsing
-  var factory = engine.createFactory(require(str));
-  var parsed = new factory(options);
+    var enableCache = options.cache;
+    delete options.cache;
 
-  try {
-
-    var content = engine.renderToStaticMarkup(parsed);
+    // Start Conversion
+    try {
+
+      var code;
+      var factory;
 
-    if (layout){
-      var _ = requires.lodash || (requires.lodash = require('lodash'));
+      if (!cache(options)){
+        // Parsing
+        code = (type === 'path') ? require(resolve(str)) : requireReactString(str);
+        factory = cache(options, engine.createFactory(code));
+
+      } else {
+        factory = cache(options);
+      }
+
+      var content = engine.renderToStaticMarkup(new factory(options));
 
-      var base = fs.readFileSync(layout);
-      var compiler = _.template(base, {interpolate: /{{([\s\S]+?)}}/g});
+      if (base){
+        var baseStr = readCache[str] || fs.readFileSync(resolve(base), 'utf8');
+        if (enableCache) readCache[str] = baseStr;
+
+        content = baseStr.replace(/{{content}}/g, content);
+      }
 
-      content = compiler({content: content});
+      fn(null, content);
+    } catch (err) {
+      fn(err);
     }
+  };
+}
 
-    fn(null, content);
 
-  } catch (err) {
-    fn(err);
-  }
+/**
+ * React JS Support
+ */
+exports.react = reactRenderer('path');
+
+
+/**
+ * React JS string support.
+ */
+exports.react.render = reactRenderer('str');
 
-}
diff --git a/test/consolidate.js b/test/consolidate.js
@@ -1,39 +1,40 @@
 
-require('./shared').test('jade');
-require('./shared').test('liquid');
-require('./shared/filters').test('liquid');
-require('./shared/includes').test('liquid');
-require('./shared').test('ejs');
-require('./shared').test('swig');
-require('./shared').test('jazz');
-require('./shared').test('jqtpl');
-require('./shared').test('liquor');
-require('./shared').test('haml');
-require('./shared').test('hamlet');
-require('./shared').test('eco');
-require('./shared').test('whiskers');
-require('./shared').test('haml-coffee');
-require('./shared').test('hogan');
-require('./shared/partials').test('hogan');
-require('./shared').test('dust');
-require('./shared/partials').test('dust');
-require('./shared').test('handlebars');
-require('./shared/partials').test('handlebars');
-require('./shared/helpers').test('handlebars');
-require('./shared').test('underscore');
-require('./shared').test('lodash');
-require('./shared').test('qejs');
-require('./shared').test('walrus');
-require('./shared').test('mustache');
-require('./shared/partials').test('mustache');
-require('./shared').test('just');
-require('./shared').test('ect');
-require('./shared').test('mote');
-require('./shared').test('toffee');
-require('./shared').test('atpl');
-require('./shared').test('templayed');
-require('./shared').test('dot');
-require('./shared').test('ractive');
-require('./shared/partials').test('ractive');
-require('./shared').test('nunjucks');
-require('./shared').test('htmling');
+// require('./shared').test('jade');
+// require('./shared').test('liquid');
+// require('./shared/filters').test('liquid');
+// require('./shared/includes').test('liquid');
+// require('./shared').test('ejs');
+// require('./shared').test('swig');
+// require('./shared').test('jazz');
+// require('./shared').test('jqtpl');
+// require('./shared').test('liquor');
+// require('./shared').test('haml');
+// require('./shared').test('hamlet');
+// require('./shared').test('eco');
+// require('./shared').test('whiskers');
+// require('./shared').test('haml-coffee');
+// require('./shared').test('hogan');
+// require('./shared/partials').test('hogan');
+// require('./shared').test('dust');
+// require('./shared/partials').test('dust');
+// require('./shared').test('handlebars');
+// require('./shared/partials').test('handlebars');
+// require('./shared/helpers').test('handlebars');
+// require('./shared').test('underscore');
+// require('./shared').test('lodash');
+// require('./shared').test('qejs');
+// require('./shared').test('walrus');
+// require('./shared').test('mustache');
+// require('./shared/partials').test('mustache');
+// require('./shared').test('just');
+// require('./shared').test('ect');
+// require('./shared').test('mote');
+// require('./shared').test('toffee');
+// require('./shared').test('atpl');
+// require('./shared').test('templayed');
+// require('./shared').test('dot');
+// require('./shared').test('ractive');
+// require('./shared/partials').test('ractive');
+// require('./shared').test('nunjucks');
+// require('./shared').test('htmling');
+require('./shared/requires').test('react');
diff --git a/test/fixtures/react/user.react b/test/fixtures/react/user.react
@@ -0,0 +1,13 @@
+var React = require('react');
+
+var User = React.createClass({
+  render: function() {
+    return (
+      <p>
+        {this.props.user.name}
+      </p>
+    );
+  }
+});
+
+module.exports = User;
diff --git a/test/shared/requires.js b/test/shared/requires.js
@@ -0,0 +1,41 @@
+
+var consolidate = require('../../')
+  , fs = require('fs')
+  , readFile = fs.readFile
+  , readFileSync = fs.readFileSync;  
+
+var cons = consolidate;
+require.extensions['.react'] = cons.reactTransform;
+
+exports.test = function(name) {
+  var user = { name: 'Tobi' };
+
+  describe(name, function(){
+
+    beforeEach(function(){
+      fs.readFile = readFile;
+      fs.readFileSync = readFileSync;
+    });
+
+    it('should support locals', function(done){
+      var path = 'test/fixtures/' + name + '/user.' + name;
+      var locals = { user: user };
+      cons[name](path, locals, function(err, html){
+        if (err) return done(err);
+        html.should.equal('<p>Tobi</p>');
+        done();
+      });
+    });
+
+
+    it('should support rendering a string', function(done){
+      var str = fs.readFileSync('test/fixtures/' + name + '/user.' + name).toString();
+      var locals = { user: user };
+      cons[name].render(str, locals, function(err, html){
+        if (err) return done(err);
+        html.should.equal('<p>Tobi</p>');
+        done();
+      });
+    });
+  });
+};