use context as global object to fix leak on server side

Author: kaesonho

src/libs/ReactI13n.js

@@ -10,7 +10,6 @@ var debug = debugLib('ReactI13n');
 var EventsQueue = require('./EventsQueue');
 var I13nNode = require('./I13nNode');
 var DEFAULT_HANDLER_TIMEOUT = 1000;
-var GLOBAL_OBJECT = ('client' === ENVIRONMENT) ? window : global;
 var ENVIRONMENT = (typeof window !== 'undefined') ? 'client' : 'server';
 
 // export the debug lib in client side
@@ -26,6 +25,7 @@ if ('client' === ENVIRONMENT) {
  * @param {Object} options.rootModelData model data of root i13n node
  * @param {Object} options.i13nNodeClass the i13nNode class, you can inherit it with your own functionalities
  * @param {String} options.scrollableContainerId id of the scrollable element that your components
+ * @param {String} options.context context object
  *     reside within.  Normally, you won't need to provide a value for this.  This is only to
  *     support viewport checking when your components are contained within a scrollable element.
  *     Currently, only elements that fill the viewport are supported.
@@ -42,19 +42,21 @@ var ReactI13n = function ReactI13n (options) {
     this._rootModelData = options.rootModelData || {};
     this._handlerTimeout = options.handlerTimeout || DEFAULT_HANDLER_TIMEOUT;
     this._scrollableContainerId = options.scrollableContainerId || undefined;
+    this._context = options.context;
 
     // set itself to the global object so that we can get it anywhere by the static function getInstance
-    GLOBAL_OBJECT.reactI13n = this;
+    this._context.reactI13n = this;
 };
 
 /**
  * Get ReactI13n Instance
  * @method getInstance
+ * @param {Object} context context object
  * @return the ReactI13n instance
  * @static
  */
-ReactI13n.getInstance = function getInstance () {
-    return GLOBAL_OBJECT.reactI13n;
+ReactI13n.getInstance = function getInstance (context) {
+    return context.reactI13n;;
 };
 
 /**
@@ -63,11 +65,14 @@ ReactI13n.getInstance = function getInstance () {
  */
 ReactI13n.prototype.createRootI13nNode = function createRootI13nNode () {
     var I13nNodeClass = this.getI13nNodeClass();
-    GLOBAL_OBJECT.rootI13nNode = new I13nNodeClass(null, this._rootModelData, false);
+    if (this._context.rootI13nNode) {
+        return this._context.rootI13nNode;
+    }
+    this._context.rootI13nNode = new I13nNodeClass(null, this._rootModelData, false);
     if ('client' === ENVIRONMENT) {
-        GLOBAL_OBJECT.rootI13nNode.setDOMNode(document.body);
+        this._context.rootI13nNode.setDOMNode(document.body);
     }
-    return GLOBAL_OBJECT.rootI13nNode;
+    return this._context.rootI13nNode;
 };
 
 /**
@@ -191,7 +196,7 @@ ReactI13n.prototype.getScrollableContainerDOMNode = function getScrollableContai
  * @return {Object} root react i13n node
  */
 ReactI13n.prototype.getRootI13nNode = function getRootI13nNode () {
-    return GLOBAL_OBJECT.rootI13nNode;
+    return this._context.rootI13nNode;
 };
 
 /**

src/mixins/I13nUtils.js

@@ -76,7 +76,7 @@ var I13nUtils = {
      * @return {Object} react i13n instance
      */
     _getReactI13n: function () {
-        return ReactI13n.getInstance();
+        return ReactI13n.getInstance(this.context);
     },
 
     /**

src/utils/setupI13n.js

@@ -25,11 +25,6 @@ module.exports = function setupI13n (Component, options, plugins) {
     var RootI13nComponent;
     var componentName = Component.displayName || Component.name;
 
-    var reactI13n = new ReactI13n(options);
-    plugins.forEach(function setPlugin(plugin) {
-        reactI13n.plug(plugin);
-    });
-
     RootI13nComponent = React.createClass({
 
         mixins: [I13nUtils],
@@ -43,7 +38,11 @@ module.exports = function setupI13n (Component, options, plugins) {
          * @method componentWillMount
          */
         componentWillMount: function () {
-            var reactI13n = ReactI13n.getInstance();
+            var reactI13n = ReactI13n.getInstance(this.context);
+            var reactI13n = new ReactI13n(options);
+            plugins.forEach(function setPlugin(plugin) {
+                reactI13n.plug(plugin);
+            });
             reactI13n.createRootI13nNode();
         },
 

tests/unit/libs/ReactI13n.js

@@ -8,19 +8,23 @@
 
 var expect = require('expect.js');
 var ReactI13n = require('../../../../dist/libs/ReactI13n');
+var mockContext = {};
 
 describe('ReactI13n', function () {
 
     it('should be created correctly', function () {
         var reactI13n = new ReactI13n({
+            context: mockContext,
             isViewportEnabled: true
         });
-        expect(ReactI13n.getInstance()).to.eql(reactI13n); // static function should be able to get the instance we created
+        expect(ReactI13n.getInstance(mockContext)).to.eql(reactI13n);
+        // static function should be able to get the instance we created
         expect(reactI13n.isViewportEnabled()).to.eql(true);
     });
 
     it('should be able to update options', function () {
         var reactI13n = new ReactI13n({
+            context: mockContext,
             isViewportEnabled: true
         });
         expect(reactI13n.isViewportEnabled()).to.eql(true);
@@ -41,6 +45,7 @@ describe('ReactI13n', function () {
             return rootModelData;
         }
         var reactI13n = new ReactI13n({
+            context: mockContext,
             rootModelData: rootModelData,
             i13nNodeClass: mockReactI13nClass
         });
@@ -68,7 +73,9 @@ describe('ReactI13n', function () {
                 }
             }
         };
-        var reactI13n = new ReactI13n({});
+        var reactI13n = new ReactI13n({
+            context: mockContext,
+        });
         reactI13n.plug(mockPlugin1);
         reactI13n.plug(mockPlugin2);
         // two plugin should be executed correctly then call the custom callback
@@ -93,7 +100,9 @@ describe('ReactI13n', function () {
             foo: 'bar'
         };
 
-        var reactI13n = new ReactI13n({});
+        var reactI13n = new ReactI13n({
+            context: mockContext,
+        });
         reactI13n.plug(mockPlugin1);
         reactI13n.execute('click', payload, function () {
             // should only have one attribute as 'foo', which means payload is not modified inside reactI13n.execute
@@ -112,7 +121,9 @@ describe('ReactI13n', function () {
             }
         };
 
-        var reactI13n = new ReactI13n({});
+        var reactI13n = new ReactI13n({
+            context: mockContext,
+        });
         reactI13n.plug(mockPlugin1);
         // two plugin should be executed correctly then call the custom callback
         reactI13n.execute('click', {}, function () {
@@ -124,6 +135,7 @@ describe('ReactI13n', function () {
 
     it('should be able to set a scrollableContainerId', function () {
         var reactI13n = new ReactI13n({
+            context: mockContext,
             scrollableContainerId: 'scrollable-test'
         });
 
@@ -132,6 +144,7 @@ describe('ReactI13n', function () {
 
     it('should have an undefined scrollableContainerDOMNode if the scrollableContainerId is undefined', function () {
         var reactI13n = new ReactI13n({
+            context: mockContext,
             isViewportEnabled: true
         });