react-i13n - npm Package Compare versions

Comparing version 0.1.19 to 0.1.20

dist/libs/I13nNode.js

@@ -80,2 +80,11 @@ /**
 /**
+ * Get the react component
+ * @method getReactComponent
+ * @return {Object} the react component
+ */
+I13nNode.prototype.getReactComponent = function getReactComponent () {
+    return this._component;
+};
+
+/**
  * Get the dom node
@@ -231,2 +240,11 @@ * @method getDOMNode
 /**
+ * set react component
+ * @method setReactComponent
+ * @param {Object} react component
+ */
+I13nNode.prototype.setReactComponent = function setDOMNode (component) {
+    this._component = component;
+};
+
+/**
  * Update DOM node 
@@ -233,0 +251,0 @@ * @method setDOMNode

dist/mixins/I13nMixin.js

@@ -9,2 +9,3 @@ /**
 var React = require('react');
+var debug = require('debug')('I13nMixin');
 var ReactI13n = require('../libs/ReactI13n');
@@ -20,2 +21,4 @@ var clickHandler = require('../utils/clickHandler');
 var DEFAULT_SCAN_TAGS = ['a', 'button'];
+var pageInitViewportDetectionTimeout = null;
+var pageInitViewportDetected = false;
 
@@ -77,14 +80,2 @@ function convertToArray (arr) {
     },
-    
-    /**
-     * getDefaultProps
-     * @method getDefaultProps
-     * @return {Object} default props
-     */
-    getDefaultProps: function () {
-        return {
-            model: null,
-            i13nModel: null
-        };
-    },
 
@@ -106,3 +97,3 @@ /**
         }
-        
+
         self._i13nNode.setDOMNode(self.getDOMNode());
@@ -136,2 +127,3 @@
         this._createI13nNode();
+        this._i13nNode.setReactComponent(this);
     },
@@ -252,5 +244,5 @@
     },
- 
+
     /**
-     * _enableViewportDetection for react-viewport
+     * _enableViewportDetection
      * @method _enableViewportDetection
@@ -261,5 +253,10 @@ * @private
         this.onEnterViewport(this._handleEnterViewport);
-        // TODO remove this manually functiona calling if mixin support the initial detection
-        ViewportMixin._detectViewport.apply(this);
-        ViewportMixin._detectHidden.apply(this);
+       
+        // for page init status, trigger page-init viewport detection to improve performance
+        // otherwise for page update case, detect viewport directly
+        if (!pageInitViewportDetected) {
+            this._triggerPageInitViewportDetection();
+        } else {
+            this._detectViewport();
+        }
     },
@@ -273,9 +270,55 @@
     _handleEnterViewport: function () {
-        if (!this._i13nNode.isInViewport()) {
-            this._i13nNode.setIsInViewport(true);
-            this.executeI13nEvent('enterViewport', {});
-        }
+        this._i13nNode.setIsInViewport(true);
+        this.unsubscribeViewportEvents();
+        this.executeI13nEvent('enterViewport', {});
     },
     
     /**
+     * trigger the page-init viewport detection
+     * @method _triggerPageInitViewportDetection
+     * @private
+     */
+    _triggerPageInitViewportDetection: function () {
+        var self = this;
+        // clear the timeout until latest node is mounted, then trigger the viewport detection
+        clearTimeout(pageInitViewportDetectionTimeout);
+        pageInitViewportDetectionTimeout = setTimeout(function executePageInitViewportDetection () {
+            self._pageInitViewportDetection();
+            pageInitViewportDetected = true;
+        }, 500);
+    },
+    
+    /**
+     * page-init viewport detection
+     * @method _pageInitViewportDetection
+     * @private
+     */
+    _pageInitViewportDetection: function () {
+        debug('page init viewport detection');
+        var reactI13n = this._getReactI13n();
+        var rootI13nNode = reactI13n.getRootI13nNode();
+        // we don't have react component for root node, start from it's children
+        rootI13nNode.getChildrenNodes().forEach(function detectRootChildrenViewport (childNode) {
+            childNode.getReactComponent()._recursiveDetectViewport();
+        });
+    },
+
+    /**
+     * recursively detect viewport
+     * @method _recursiveDetectViewport
+     * @private
+     */
+    _recursiveDetectViewport: function () {
+        var self = this;
+        // detect viewport from the root, and skip all children's detection if it's not in the viewport
+        self._detectViewport(function detectCallback () {
+            if (self._i13nNode.isInViewport()) {
+                self._i13nNode.getChildrenNodes().forEach(function detectChildrenViewport (childNode) {
+                    childNode.getReactComponent()._recursiveDetectViewport();
+                });
+            }
+        });
+    },
+    
+    /**
      * _createI13nNode
@@ -282,0 +325,0 @@ * @method _createI13nNode

dist/mixins/viewport/ViewportMixin.js

@@ -33,9 +33,6 @@ /**
 
-    exitViewportCallback: null,
-
-    _detectElement: function (i13nNode, enterViewportCallback, exitViewportCallback) {
-        
+    _detectElement: function (i13nNode, enterViewportCallback, callback) {
         var element = i13nNode && i13nNode.getDOMNode();
         if (!element) {
-            return;
+            return callback && callback();
         }
@@ -53,18 +50,10 @@ var rect = element.getBoundingClientRect();
         }
-        
         // Detect Screen Bottom                           // Detect Screen Top
         if ((rect.top < window.innerHeight + margins.top) && (rect.bottom > 0  - margins.bottom)) {
-            if (!i13nNode.isInViewport()) {
-                enterViewportCallback && enterViewportCallback();
-                i13nNode.setIsInViewport(true);
-            }
-        } else {
-            if (i13nNode.isInViewport()) {
-                exitViewportCallback && exitViewportCallback();
-                i13nNode.setIsInViewport(false);
-            }
+            enterViewportCallback && enterViewportCallback()
         }
+        callback && callback();
     },
 
-    _detectViewport: function () {
+    _detectViewport: function (callback) {
         var self = this;
@@ -74,16 +63,6 @@ if (!self.isMounted()) {
         }
-        self._detectElement(self._i13nNode, self.enterViewportCallback, self.exitViewportCallback);
+        self._detectElement(self._i13nNode, self.enterViewportCallback, callback);
         self._subComponentsViewportDetection && self._subComponentsViewportDetection();
     },
 
-    _detectHidden: function (hidden) {
-        var self = this;
-        if (!hidden) {
-            this._detectViewport();
-        } else {
-            self.exitViewportCallback && self.exitViewportCallback();
-            self.isOnViewport = false;
-        }
-    },
-
     getDefaultProps: function () {
@@ -103,3 +82,2 @@ return {
         this.subscribe('scroll', this._detectViewport);
-        this.subscribe('visibilitychange', this._detectHidden);
     },
@@ -109,3 +87,2 @@
         this.unsubscribe('scroll');
-        this.unsubscribe('visibilitychange');
     },
@@ -112,0 +89,0 @@

dist/utils/clickHandler.js

@@ -58,2 +58,3 @@ /**
     var props = self.props;
+    var followLink = (undefined !== props.followLink) ? props.followLink : props.follow;
     var href = '';
@@ -69,4 +70,4 @@
     // if users disable the redirect by follow, force set it as false
-    if (undefined !== props.follow) {
-        isRedirectLink = props.follow;
+    if (undefined !== followLink) {
+        isRedirectLink = followLink;
     }
@@ -73,0 +74,0 @@

dist/utils/createI13nNode.js

@@ -29,4 +29,5 @@ /* global process */
    
-    var I13nComponent = React.createClass(objectAssign({}, I13nMixin, {
+    var I13nComponent = React.createClass({
         displayName: 'I13n' + componentName,
+        mixins: [I13nMixin],
 
@@ -39,9 +40,11 @@ /**
         getDefaultProps: function () {
-            return {
-                model: options.model || null,
-                i13nModel: options.i13nModel || null,
-                isLeafNode: options.isLeafNode || false,
-                bindClickEvent: options.bindClickEvent || false,
-                follow: options.follow || false
-            };
+            return objectAssign({}, {
+                model: null,
+                i13nModel: null,
+                isLeafNode: false,
+                bindClickEvent: false,
+                follow: false,
+                followLink: false,
+                scanLinks: null
+            }, options);
         },
@@ -78,3 +81,3 @@
         }
-    }));
+    });
     
@@ -81,0 +84,0 @@ if ('function' === typeof Component) {

package.json

 {
   "name": "react-i13n",
-  "description": "react i13n",
-  "version": "0.1.19",
+  "description": "React I13n provides a performant and scalable solution to application instrumentation.",
+  "version": "0.1.20",
   "main": "index.js",
@@ -6,0 +6,0 @@ "repository": {

README.md

@@ -88,2 +88,6 @@ # react-i13n
 
+## Examples
+* [react-i13n-flux-examples](https://github.com/kaesonho/react-i13n-flux-examples) - we forked the [flux examples](https://github.com/facebook/flux/tree/master/examples) and integrated `react-i13n` with it.
+* [fluxible.io](http://fluxible.io/) - [fluxible](https://github.com/yahoo/fluxible) site integrating `react-i13n` and [react-i13n-ga](https://github.com/kaesonho/react-i13n-ga).
+
 ## Set ENV during CI process
@@ -138,2 +142,2 @@ We check `process.env.NODE_ENV !== 'production'` to determine if we should do some action like print out warning massage, that means it's recommended to use tools like `envify` as part of your build process to strip out non-production code for production build.
 This software is free to use under the Yahoo Inc. BSD license.
-See the [LICENSE file][] for license text and copyright information.
+See the [LICENSE file](./LICENSE.md) for license text and copyright information.

No alert changes

Improved metrics

Total package byte prevSize

75209

increased by2.85%

Lines of code

1835

increased by2.29%

Number of lines in readme file

142

increased by2.9%

No dependency changes