[RFC] New ReactDefaultPerf

examples/todomvc-director/index.html

@@ -12,10 +12,11 @@
 		<div id="benchmark"></div>
 
 		<script src="bower_components/todomvc-common/base.js"></script>
-		<script src="bower_components/react/react.js"></script>
-		<script src="bower_components/react/JSXTransformer.js"></script>
+    <script src="../../build/react-with-addons.js"></script>
+    <script src="../../build/JSXTransformer.js"></script>
 		<script src="bower_components/director/build/director.min.js"></script>
 
+
 		<script type="text/jsx" src="js/utils.jsx"></script>
 		<script type="text/jsx" src="js/todoItem.jsx"></script>
 		<script type="text/jsx" src="js/footer.jsx"></script>

src/ReactWithAddons.js

@@ -37,5 +37,9 @@ React.addons = {
   TransitionGroup: ReactTransitionGroup
 };
 
+if (__DEV__) {
+  React.addons.Perf = require('ReactDefaultPerf');
+}
+
 module.exports = React;
 

src/core/ReactCompositeComponent.js

@@ -1150,28 +1150,32 @@ var ReactCompositeComponentMixin = {
   /**
    * @private
    */
-  _renderValidatedComponent: function() {
-    var renderedComponent;
-    var previousContext = ReactContext.current;
-    ReactContext.current = this._processChildContext(this._currentContext);
-    ReactCurrentOwner.current = this;
-    try {
-      renderedComponent = this.render();
-    } catch (error) {
-      // IE8 requires `catch` in order to use `finally`.
-      throw error;
-    } finally {
-      ReactContext.current = previousContext;
-      ReactCurrentOwner.current = null;
+  _renderValidatedComponent: ReactPerf.measure(
+    'ReactCompositeComponent',
+    '_renderValidatedComponent',
+    function() {
+      var renderedComponent;
+      var previousContext = ReactContext.current;
+      ReactContext.current = this._processChildContext(this._currentContext);
+      ReactCurrentOwner.current = this;
+      try {
+        renderedComponent = this.render();
+      } catch (error) {
+        // IE8 requires `catch` in order to use `finally`.
+        throw error;
+      } finally {
+        ReactContext.current = previousContext;
+        ReactCurrentOwner.current = null;
+      }
+      invariant(
+        ReactComponent.isValidComponent(renderedComponent),
+        '%s.render(): A valid ReactComponent must be returned. You may have ' +
+          'returned null, undefined, an array, or some other invalid object.',
+        this.constructor.displayName || 'ReactCompositeComponent'
+      );
+      return renderedComponent;
     }
-    invariant(
-      ReactComponent.isValidComponent(renderedComponent),
-      '%s.render(): A valid ReactComponent must be returned. You may have ' +
-      'returned null, undefined, an array, or some other invalid object.',
-      this.constructor.displayName || 'ReactCompositeComponent'
-    );
-    return renderedComponent;
-  },
+  ),
 
   /**
    * @private

src/core/ReactDOMIDOperations.js

@@ -25,6 +25,7 @@ var CSSPropertyOperations = require('CSSPropertyOperations');
 var DOMChildrenOperations = require('DOMChildrenOperations');
 var DOMPropertyOperations = require('DOMPropertyOperations');
 var ReactMount = require('ReactMount');
+var ReactPerf = require('ReactPerf');
 
 var getTextContentAccessor = require('getTextContentAccessor');
 var invariant = require('invariant');
@@ -66,7 +67,7 @@ var ReactDOMIDOperations = {
    * @param {*} value New value of the property.
    * @internal
    */
-  updatePropertyByID: function(id, name, value) {
+  updatePropertyByID: ReactPerf.measure('ReactDOMIDOperations', 'updatePropertyByID', function(id, name, value) {
     var node = ReactMount.getNode(id);
     invariant(
       !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
@@ -82,7 +83,7 @@ var ReactDOMIDOperations = {
     } else {
       DOMPropertyOperations.deleteValueForProperty(node, name);
     }
-  },
+  }),
 
   /**
    * Updates a DOM node to remove a property. This should only be used to remove
@@ -92,15 +93,15 @@ var ReactDOMIDOperations = {
    * @param {string} name A property name to remove, see `DOMProperty`.
    * @internal
    */
-  deletePropertyByID: function(id, name, value) {
+  deletePropertyByID: ReactPerf.measure('ReactDOMIDOperations', 'deletePropertyByID', function(id, name, value) {
     var node = ReactMount.getNode(id);
     invariant(
       !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
       'updatePropertyByID(...): %s',
       INVALID_PROPERTY_ERRORS[name]
     );
     DOMPropertyOperations.deleteValueForProperty(node, name, value);
-  },
+  }),
 
   /**
    * Updates a DOM node with new style values. If a value is specified as '',
@@ -110,10 +111,10 @@ var ReactDOMIDOperations = {
    * @param {object} styles Mapping from styles to values.
    * @internal
    */
-  updateStylesByID: function(id, styles) {
+  updateStylesByID: ReactPerf.measure('ReactDOMIDOperations', 'updateStylesByID', function(id, styles) {
     var node = ReactMount.getNode(id);
     CSSPropertyOperations.setValueForStyles(node, styles);
-  },
+  }),
 
   /**
    * Updates a DOM node's innerHTML.
@@ -122,29 +123,29 @@ var ReactDOMIDOperations = {
    * @param {string} html An HTML string.
    * @internal
    */
-  updateInnerHTMLByID: function(id, html) {
+  updateInnerHTMLByID: ReactPerf.measure('ReactDOMIDOperations', 'updateInnerHTMLByID', function(id, html) {
     var node = ReactMount.getNode(id);
-    
+
     // IE8: When updating a just created node with innerHTML only leading
     // whitespace is removed. When updating an existing node with innerHTML
     // whitespace in root TextNodes is also collapsed.
     // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
-    
+
     if (useWhitespaceWorkaround === undefined) {
       // Feature detection; only IE8 is known to behave improperly like this.
       var temp = document.createElement('div');
       temp.innerHTML = ' ';
       useWhitespaceWorkaround = temp.innerHTML === '';
     }
-    
+
     if (useWhitespaceWorkaround) {
       // Magic theory: IE8 supposedly differentiates between added and updated
       // nodes when processing innerHTML, innerHTML on updated nodes suffers
       // from worse whitespace behavior. Re-adding a node like this triggers
       // the initial and more favorable whitespace behavior.
       node.parentNode.replaceChild(node, node);
     }
-    
+
     if (useWhitespaceWorkaround && html.match(/^[ \r\n\t\f]/)) {
       // Recover leading whitespace by temporarily prepending any character.
       // \uFEFF has the potential advantage of being zero-width/invisible.
@@ -153,7 +154,7 @@ var ReactDOMIDOperations = {
     } else {
       node.innerHTML = html;
     }
-  },
+  }),
 
   /**
    * Updates a DOM node's text content set by `props.content`.
@@ -162,10 +163,10 @@ var ReactDOMIDOperations = {
    * @param {string} content Text content.
    * @internal
    */
-  updateTextContentByID: function(id, content) {
+  updateTextContentByID: ReactPerf.measure('ReactDOMIDOperations', 'updateTextContentByID', function(id, content) {
     var node = ReactMount.getNode(id);
     node[textContentAccessor] = content;
-  },
+  }),
 
   /**
    * Replaces a DOM node that exists in the document with markup.
@@ -175,10 +176,10 @@ var ReactDOMIDOperations = {
    * @internal
    * @see {Danger.dangerouslyReplaceNodeWithMarkup}
    */
-  dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
+  dangerouslyReplaceNodeWithMarkupByID: ReactPerf.measure('ReactDOMIDOperations', 'dangerouslyReplaceNodeWithMarkupByID', function(id, markup) {
     var node = ReactMount.getNode(id);
     DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
-  },
+  }),
 
   /**
    * Updates a component's children by processing a series of updates.
@@ -187,12 +188,12 @@ var ReactDOMIDOperations = {
    * @param {array<string>} markup List of markup strings.
    * @internal
    */
-  dangerouslyProcessChildrenUpdates: function(updates, markup) {
+  dangerouslyProcessChildrenUpdates: ReactPerf.measure('ReactDOMIDOperations', 'dangerouslyProcessChildrenUpdates', function(updates, markup) {
     for (var i = 0; i < updates.length; i++) {
       updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
     }
     DOMChildrenOperations.processUpdates(updates, markup);
-  }
+  })
 
 };
 

src/core/ReactDefaultInjection.js

@@ -93,10 +93,6 @@ function inject() {
 
   DOMProperty.injection.injectDOMPropertyConfig(DefaultDOMPropertyConfig);
 
-  if (__DEV__) {
-    ReactPerf.injection.injectMeasure(require('ReactDefaultPerf').measure);
-  }
-
   ReactUpdates.injection.injectBatchingStrategy(
     ReactDefaultBatchingStrategy
   );

src/core/ReactUpdates.js

@@ -18,6 +18,8 @@
 
 "use strict";
 
+var ReactPerf = require('ReactPerf');
+
 var invariant = require('invariant');
 
 var dirtyComponents = [];
@@ -75,7 +77,7 @@ function clearDirtyComponents() {
   dirtyComponents.length = 0;
 }
 
-function flushBatchedUpdates() {
+var flushBatchedUpdates = ReactPerf.measure('ReactUpdates', 'flushBatchedUpdates', function() {
   // Run these in separate functions so the JIT can optimize
   try {
     runBatchedUpdates();
@@ -85,7 +87,7 @@ function flushBatchedUpdates() {
   } finally {
     clearDirtyComponents();
   }
-}
+});
 
 /**
  * Mark a component as needing a rerender, adding an optional callback to a