Merge pull request #80 from samsel/configurable_omit

added `renderOptionsKeysToFilter` to allow fine grain control over data that gets fed into component for rendering
paypal · Sep 8, 2015 · c04c617 · c04c617
2 parents cfc776c + 9ebb5aa
commit c04c617
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2.2.0 (Sep 02 2015)
+
+* Allow finer grain control of render properties (https://github.com/paypal/react-engine/issues/73)
+
 ## 2.1.0 (Aug 20 2015)
 
 * resolve cache clear logic based on the 'view cache' (https://github.com/paypal/react-engine/issues/74)

diff --git a/README.md b/README.md
@@ -73,12 +73,13 @@
 Pass in an optional JavaScript object as options to the react-engine's [server engine create method](#setup-in-an-express-app).
 The options object can contain properties from [react router's create configuration object](http://rackt.github.io/react-router/#Router.create).
 
-Additionally, it can contain the following optional properties,
+Additionally, it can contain the following **optional** properties,
 
-- `performanceCollector`: <function> - to collects [perf stats](#performance-profiling)
-- `routesFilePath`: <string> - path for the file that contains the react router routes.
+- `routesFilePath`: <String> - path for the file that contains the react router routes.
                    react-engine uses this behind the scenes to reload the routes file in
                    cases where [express's app property](http://expressjs.com/api.html#app.set) `view cache` is false, this way you don't need to restart the server every time a change is made in the view files or routes file.
+- `renderOptionsKeysToFilter`: <Array> - an array of keys that need to be filtered out from the data object that gets fed into the react component for rendering. [more info](#data-for-component-rendering)
+- `performanceCollector`: <Function> - to collects [perf stats](#performance-profiling)
 
 ###### Rendering views on server side
 ```js
@@ -120,11 +121,30 @@ var data = client.data();
 Pass in a JavaScript object as options to the react-engine's client boot function.
 The options object can contain properties from [react router's create configuration object](http://rackt.github.io/react-router/#Router.create).
 
-Additionally, it should contain the following `required` property,
+Additionally, it should contain the following **required** property,
 
-- `viewResolver` : <function> - a function that react-engine needs to resolve the view file.
+- `viewResolver` : <Function> - a function that react-engine needs to resolve the view file.
   an example of the viewResolver can be [found here](https://github.com/paypal/react-engine/blob/ecd27b30a9028d3f02b8f8e89d355bb5fc909de9/examples/simple/public/index.js#L29).
 
+### Data for component rendering
+The actual data that gets fed into the component for rendering is the `renderOptions` object that [express generates](https://github.com/strongloop/express/blob/2f8ac6726fa20ab5b4a05c112c886752868ac8ce/lib/application.js#L535-L588).
+
+If you don't want to pass all that data, you can pass in an array of object keys that react-engine can filter out from the `renderOptions` object before passing it into the component for rendering.
+
+```javascript
+  // example of using `renderOptionsKeysToFilter` to filter `renderOptions` keys
+  var engine = ReactEngine.server.create({
+    renderOptionsKeysToFilter: ['mySensitiveDataThatIsIn_res.locals'],
+    routes: require(path.join(__dirname + './reactRoutes'))
+  });
+```
+
+Note: By default, the following three keys are always filtered out from `renderOptions` no matter whether `renderOptionsKeysToFilter` is configured or not.
+
+- `settings`
+- `enrouten`
+- `_locals`
+
 ### Yeoman Generator
 There is a Yeoman generator available to create a new express or KrakenJS application which uses react-engine:
 [generator-react-engine](https://www.npmjs.com/package/generator-react-engine).

diff --git a/lib/config.json b/lib/config.json
@@ -1,5 +1,6 @@
 {
   "docType": "<!DOCTYPE html>",
+  "defaultKeysToFilter": ["settings", "enrouten", "_locals"],
   "client": {
     "markupId": "react-engine-props",
     "variableName": "__REACT_ENGINE__"

diff --git a/lib/server.js b/lib/server.js
@@ -38,6 +38,13 @@ var TEMPLATE = ['<script id="%s" type="application/javascript">var ',
 exports.create = function create(createOptions) {
 
   createOptions = createOptions || {};
+  createOptions.renderOptionsKeysToFilter = createOptions.renderOptionsKeysToFilter || [];
+
+  assert(Array.isArray(createOptions.renderOptionsKeysToFilter),
+      '`renderOptionsKeysToFilter` - should be an array');
+
+  createOptions.renderOptionsKeysToFilter =
+    createOptions.renderOptionsKeysToFilter.concat(Config.defaultKeysToFilter);
 
   if (createOptions.performanceCollector) {
     assert.equal(typeof createOptions.performanceCollector,
@@ -87,7 +94,7 @@ exports.create = function create(createOptions) {
         view: null,
         markupId: Config.client.markupId
       }
-    }, omit(options, ['settings', 'enrouten', '_locals']));
+    }, omit(options, createOptions.renderOptionsKeysToFilter));
 
     if (this.useRouter && !createOptions.routes) {
       return done(new Error('asking to use react router for rendering, but no routes are provided'));

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-engine",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "a composite render engine for express apps to render both plain react views and react-router views",
   "main": "index.js",
   "scripts": {

diff --git a/test/server.js b/test/server.js
@@ -248,3 +248,52 @@ test('error that renderer throws when asked to run react router without providin
   };
   setup(options);
 });
+
+test('all keys in express render `options` should be be sent to client', function(t) {
+
+  var options = {
+    engine: renderer.create({
+      routes: require(path.join(__dirname + '/fixtures/reactRoutes'))
+    }),
+    expressRoutes: function(req, res) {
+      res.locals.someSensitiveData = 1234;
+      res.render(req.url, DATA_MODEL);
+    },
+
+    onSetup: function(done) {
+      inject('/account', function(err, data) {
+        t.error(err);
+        var $ = cheerio.load(data);
+        var matchIndex = $.html().indexOf('someSensitiveData');
+        t.notEqual(matchIndex, -1);
+        done(t);
+      });
+    }
+  };
+  setup(options);
+});
+
+test('all keys in express render `renderOptionsKeysToFilter` should be used to filter out renderOptions', function(t) {
+
+  var options = {
+    engine: renderer.create({
+      routes: require(path.join(__dirname + '/fixtures/reactRoutes')),
+      renderOptionsKeysToFilter: ['someSensitiveData']
+    }),
+    expressRoutes: function(req, res) {
+      res.locals.someSensitiveData = 1234;
+      res.render(req.url, DATA_MODEL);
+    },
+
+    onSetup: function(done) {
+      inject('/account', function(err, data) {
+        t.error(err);
+        var $ = cheerio.load(data);
+        var matchIndex = $.html().indexOf('someSensitiveData');
+        t.equal(matchIndex, -1);
+        done(t);
+      });
+    }
+  };
+  setup(options);
+});