react-render-hook - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/react-devtools/backend/attachRenderer.js

@@ -9,3 +9,3 @@ /**
  *
- * @flow
+ * 
  */
@@ -37,21 +37,30 @@ 'use strict';
     };
-    // React DOM
-  } else if (renderer.Mount.getID && renderer.Mount.getNode) {
-    extras.getNativeFromReactElement = function (component) {
-      try {
-        return renderer.Mount.getNode(component._rootNodeID);
-      } catch (e) {}
-    };
+    // React DOM 15+
+  } else if (renderer.ComponentTree) {
+      extras.getNativeFromReactElement = function (component) {
+        return renderer.ComponentTree.getNodeFromInstance(component);
+      };
 
-    extras.getReactElementFromNative = function (node) {
-      var id = renderer.Mount.getID(node);
-      while (node && node.parentNode && !id) {
-        node = node.parentNode;
-        id = renderer.Mount.getID(node);
+      extras.getReactElementFromNative = function (node) {
+        return renderer.ComponentTree.getClosestInstanceFromNode(node);
+      };
+      // React DOM
+    } else if (renderer.Mount.getID && renderer.Mount.getNode) {
+        extras.getNativeFromReactElement = function (component) {
+          try {
+            return renderer.Mount.getNode(component._rootNodeID);
+          } catch (e) {}
+        };
+
+        extras.getReactElementFromNative = function (node) {
+          var id = renderer.Mount.getID(node);
+          while (node && node.parentNode && !id) {
+            node = node.parentNode;
+            id = renderer.Mount.getID(node);
+          }
+          return rootNodeIDMap.get(id);
+        };
+      } else {
+        console.warn('Unknown react version (does not have getID), probably an unshimmed React Native');
       }
-      return rootNodeIDMap.get(id);
-    };
-  } else {
-    console.warn('Unknown react version (does not have getID), probably an unshimmed React Native');
-  }
 
@@ -69,6 +78,6 @@ var oldMethods;
   } else if (renderer.Mount.renderComponent) {
-    oldRenderComponent = decorateResult(renderer.Mount, 'renderComponent', function (element) {
-      hook.emit('root', { renderer: rid, element: element._reactInternalInstance });
-    });
-  }
+      oldRenderComponent = decorateResult(renderer.Mount, 'renderComponent', function (element) {
+        hook.emit('root', { renderer: rid, element: element._reactInternalInstance });
+      });
+    }
 
@@ -90,3 +99,3 @@ if (renderer.Component) {
         setTimeout(function () {
-          hook.emit('mount', { element: _this, data: getData012(_this, {}), renderer: rid });
+          hook.emit('mount', { element: _this, data: getData012(_this), renderer: rid });
         }, 0);
@@ -98,3 +107,3 @@ },
         setTimeout(function () {
-          hook.emit('update', { element: _this2, data: getData012(_this2, {}), renderer: rid });
+          hook.emit('update', { element: _this2, data: getData012(_this2), renderer: rid });
         }, 0);
@@ -105,7 +114,8 @@ },
         rootNodeIDMap['delete'](this._rootNodeID, this);
-      } });
+      }
+    });
   } else if (renderer.Reconciler) {
     oldMethods = decorateMany(renderer.Reconciler, {
       mountComponent: function mountComponent(element, rootID, transaction, context) {
-        var data = getData(element, context);
+        var data = getData(element);
         rootNodeIDMap.set(element._rootNodeID, element);
@@ -115,6 +125,6 @@ hook.emit('mount', { element: element, data: data, renderer: rid });
       performUpdateIfNecessary: function performUpdateIfNecessary(element, nextChild, transaction, context) {
-        hook.emit('update', { element: element, data: getData(element, context), renderer: rid });
+        hook.emit('update', { element: element, data: getData(element), renderer: rid });
       },
       receiveComponent: function receiveComponent(element, nextChild, transaction, context) {
-        hook.emit('update', { element: element, data: getData(element, context), renderer: rid });
+        hook.emit('update', { element: element, data: getData(element), renderer: rid });
       },
@@ -124,3 +134,4 @@ unmountComponent: function unmountComponent(element) {
         rootNodeIDMap['delete'](element._rootNodeID, element);
-      } });
+      }
+    });
   }
@@ -127,0 +138,0 @@

lib/react-devtools/backend/backend.js

@@ -9,3 +9,3 @@ /**
  *
- * @flow
+ * 
  *
@@ -12,0 +12,0 @@ * This is the chrome devtools

lib/react-devtools/backend/copyWithSet.js

@@ -9,3 +9,3 @@ /**
  *
- * @flow
+ * 
  */
@@ -12,0 +12,0 @@ 'use strict';

lib/react-devtools/backend/getData.js

@@ -9,3 +9,3 @@ /**
  *
- * @flow
+ * 
  */
@@ -53,3 +53,4 @@ 'use strict';
 
-  if (element._currentElement) {
+  // != used deliberately here to catch undefined and null
+  if (element._currentElement != null) {
     type = element._currentElement.type;
@@ -84,3 +85,4 @@ if (typeof type === 'string') {
       setInState: inst.forceUpdate && setInState.bind(null, inst),
-      setInContext: inst.forceUpdate && setInContext.bind(null, inst) };
+      setInContext: inst.forceUpdate && setInContext.bind(null, inst)
+    };
     publicInstance = inst;
@@ -106,3 +108,4 @@
     updater: updater,
-    publicInstance: publicInstance };
+    publicInstance: publicInstance
+  };
 }
@@ -109,0 +112,0 @@

lib/react-devtools/backend/getData012.js

@@ -9,3 +9,3 @@ /**
  *
- * @flow
+ * 
  */
@@ -78,3 +78,4 @@ 'use strict';
       setInState: element.forceUpdate && setInState.bind(null, element),
-      setInContext: element.forceUpdate && setInContext.bind(null, element) };
+      setInContext: element.forceUpdate && setInContext.bind(null, element)
+    };
     publicInstance = element;
@@ -93,3 +94,4 @@ }
     updater: updater,
-    publicInstance: publicInstance };
+    publicInstance: publicInstance
+  };
 }
@@ -96,0 +98,0 @@

lib/react-devtools/backend/installGlobalHook.js

@@ -9,5 +9,4 @@ /**
  *
- * @flow
+ * 
  */
-'use strict';
 
@@ -18,2 +17,4 @@ /**
  */
+'use strict';
+
 function installGlobalHook(window) {
@@ -65,3 +66,5 @@ if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
         }
-      } } });
+      }
+    }
+  });
 }
@@ -68,0 +71,0 @@

lib/react-devtools/backend/types.js

@@ -9,3 +9,3 @@ /**
  *
- * @flow
+ * 
  */
@@ -12,0 +12,0 @@ 'use strict';

package.json

 {
   "name": "react-render-hook",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
@@ -14,2 +14,3 @@ "build": "babel src -d lib --source-maps true",
   "devDependencies": {
+    "babel": "^5.8.38",
     "jsdom": "^6.5.1",
@@ -16,0 +17,0 @@ "magicpen": "^5.4.0",

README.md

 # react-render-hook
 
 `react-render-hook` uses the [React-devtools](https://github.com/facebook/react-devtools) hook to watch for rendering React components,
-and provide an inteface to get to the virtual DOM tree and find rendered elements and get the metadata about them.
+and provide an interface to get to the virtual DOM tree and find rendered elements and get the metadata about them.
 
@@ -6,0 +6,0 @@ This is meant to be used from libraries that need access to the whole virtual DOM tree, such as testing/assertion libraries.

src/react-devtools/backend/attachRenderer.js

@@ -39,2 +39,11 @@ /**
     };
+  // React DOM 15+
+  } else if (renderer.ComponentTree) {
+    extras.getNativeFromReactElement = function(component) {
+      return renderer.ComponentTree.getNodeFromInstance(component);
+    };
+
+    extras.getReactElementFromNative = function(node) {
+      return renderer.ComponentTree.getClosestInstanceFromNode(node);
+    };
   // React DOM
@@ -89,3 +98,3 @@ } else if (renderer.Mount.getID && renderer.Mount.getNode) {
         setTimeout(() => {
-          hook.emit('mount', {element: this, data: getData012(this, {}), renderer: rid});
+          hook.emit('mount', {element: this, data: getData012(this), renderer: rid});
         }, 0);
@@ -95,3 +104,3 @@ },
         setTimeout(() => {
-          hook.emit('update', {element: this, data: getData012(this, {}), renderer: rid});
+          hook.emit('update', {element: this, data: getData012(this), renderer: rid});
         }, 0);
@@ -107,3 +116,3 @@ },
       mountComponent(element, rootID, transaction, context) {
-        var data = getData(element, context);
+        var data = getData(element);
         rootNodeIDMap.set(element._rootNodeID, element);
@@ -113,6 +122,6 @@ hook.emit('mount', {element, data, renderer: rid});
       performUpdateIfNecessary(element, nextChild, transaction, context) {
-        hook.emit('update', {element, data: getData(element, context), renderer: rid});
+        hook.emit('update', {element, data: getData(element), renderer: rid});
       },
       receiveComponent(element, nextChild, transaction, context) {
-        hook.emit('update', {element, data: getData(element, context), renderer: rid});
+        hook.emit('update', {element, data: getData(element), renderer: rid});
       },
@@ -119,0 +128,0 @@ unmountComponent(element) {

src/react-devtools/backend/getData.js

@@ -53,3 +53,4 @@ /**
 
-  if (element._currentElement) {
+  // != used deliberately here to catch undefined and null
+  if (element._currentElement != null) {
     type = element._currentElement.type;
@@ -56,0 +57,0 @@ if (typeof type === 'string') {

src/react-devtools/backend/types.js

@@ -66,2 +66,6 @@ /**
   },
+  ComponentTree: {
+    getNodeFromInstance: (component: OpaqueNodeHandle) => ?NativeType,
+    getClosestInstanceFromNode: (component: NativeType) => ?OpaqueNodeHandle,
+  },
 };
@@ -68,0 +72,0 @@

src/react-devtools/package.json

 {
   "dependencies": {
-    "classnames": "^2.1.2",
-    "es6-symbol": "^2.0.1",
-    "fbjs-scripts": "0.2.1",
-    "immutable": "^3.7.4",
-    "object-assign": "^3.0.0",
-    "react": "^0.13.3"
+    "babel-core": "6.3.21",
+    "babel-eslint": "4.1.6",
+    "babel-jest": "6.0.1",
+    "babel-loader": "6.2.0",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-preset-stage-0": "6.3.13",
+    "classnames": "2.2.1",
+    "es6-symbol": "3.0.2",
+    "eslint": "1.10.3",
+    "eslint-plugin-react": "3.12.0",
+    "fbjs": "0.5.1",
+    "fbjs-scripts": "0.5.0",
+    "flow-bin": "0.21.0",
+    "immutable": "3.7.6",
+    "jest-cli": "0.9.0-fb2",
+    "json-loader": "0.5.4",
+    "node-libs-browser": "0.5.3",
+    "object-assign": "4.0.1",
+    "react": "0.14.3",
+    "react-addons-create-fragment": "0.14.3",
+    "react-dom": "0.14.3",
+    "webpack": "1.12.9"
   },
@@ -14,3 +31,3 @@ "license": "BSD-3-Clause",
     "lint": "./node_modules/.bin/eslint .",
-    "test": "node --harmony ./node_modules/.bin/jest --verbose",
+    "test": "node --harmony ./node_modules/.bin/jest",
     "typecheck": "flow check"
@@ -24,2 +41,3 @@ },
     ],
+    "testRunner": "<rootDir>/node_modules/jest-cli/src/testRunners/jasmine/jasmine2.js",
     "moduleFileExtensions": [
@@ -30,16 +48,3 @@ "js",
     ]
-  },
-  "devDependencies": {
-    "babel-core": "^5.5.8",
-    "babel-eslint": "^4.1.3",
-    "babel-jest": "^5.3.0",
-    "babel-loader": "^5.1.4",
-    "eslint": "^1.5.1",
-    "eslint-plugin-react": "^3.5.0",
-    "flow-bin": "0.17.0",
-    "jest-cli": "^0.5.0",
-    "json-loader": "^0.5.2",
-    "node-libs-browser": "^0.5.2",
-    "webpack": "^1.9.10"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61562

increased by2.07%

Lines of code

1506

increased by2.03%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes