Update ReactMeteor.js

updated to https://github.com/reactjs/react-meteor/blob/master/src/ReactMeteor.js

Author: hipertracker

src/ReactMeteor.js

@@ -1,38 +1,176 @@
 var ReactMeteorMixin = {
-    _handleMeteorChange: function () {
-        if (this.getMeteorState !== undefined) {
-            this.setState(this.getMeteorState())
-        }
-    },
+  componentWillMount: function() {
+    var self = this;
+
+    self._meteorStateDep = new Tracker.Dependency();
+    self._meteorFirstRun = true;
 
-    _cancelComputation: function () {
-        if (this._meteorComputation) {
-            this._meteorComputation.stop()
-            this._meteorComputation = null
+    if (Meteor.isClient) {
+      Tracker.autorun(function(computation) {
+        self._meteorComputation = computation;
+        self._meteorStateDep.depend();
+
+        if (self.startMeteorSubscriptions) {
+          // Calling this method in a Tracker.autorun callback will ensure
+          // that the subscriptions are canceled when the computation stops.
+          self.startMeteorSubscriptions();
         }
-    },
 
-    componentWillMount: function () {
-        this._meteorComputation = Tracker.autorun(this._handleMeteorChange)
-    },
+        enqueueMeteorStateUpdate(self);
+      });
+
+    } else {
+      enqueueMeteorStateUpdate(self);
+    }
+  },
+
+  componentWillUpdate: function(nextProps, nextState) {
+    if (this._meteorCalledSetState) {
+      // If this component update was triggered by the ReactMeteor.Mixin,
+      // then we do not want to trigger the change event again, because
+      // that would lead to an infinite update loop.
+      this._meteorCalledSetState = false;
+      return;
+    }
+
+    if (this._meteorStateDep) {
+      this._meteorStateDep.changed();
+    }
+  },
+
+  componentWillUnmount: function() {
+    if (this._meteorComputation) {
+      this._meteorComputation.stop();
+      this._meteorComputation = null;
+    }
+  }
+};
+
+function enqueueMeteorStateUpdate(component) {
+  var partialState =
+    component.getMeteorState &&
+    component.getMeteorState();
+
+  if (! partialState) {
+    // The getMeteorState method can return a falsy value to avoid
+    // triggering a state update.
+    return;
+  }
+
+  if (component._meteorFirstRun) {
+    // If it's the first time we've called enqueueMeteorStateUpdate since
+    // the component was mounted, set the state synchronously.
+    component._meteorFirstRun = false;
+    component._meteorCalledSetState = true;
+    component.setState(partialState);
+    return;
+  }
+
+  Tracker.afterFlush(function() {
+    component._meteorCalledSetState = true;
+    component.setState(partialState);
+  });
+}
 
-    componentWillReceiveProps: function (nextProps) {
-        var oldProps = this.props
-        this.props = nextProps
-        this._handleMeteorChange()
-        this.props = oldProps
-    },
+// Like React.render, but it replaces targetNode, and works even if
+// targetNode.parentNode has children other than targetNode.
+function renderInPlaceOfNode(reactElement, targetNode) {
+  var container = targetNode.parentNode;
+  var prevSibs = [];
+  var nextSibs = [];
+  var sibs = prevSibs;
+  var child = container.firstChild;
 
-    componentWillUnmount: function () {
-        this._cancelComputation()
+  while (child) {
+    if (child === targetNode) {
+      sibs = nextSibs;
+    } else {
+      sibs.push(child);
     }
+    var next = child.nextSibling;
+    container.removeChild(child);
+    child = next;
+  }
+
+  var result = React.render(reactElement, container);
+  var rendered = container.firstChild;
+
+  if (prevSibs.length > 0) {
+    prevSibs.forEach(function(sib) {
+      container.insertBefore(sib, rendered);
+    });
+  }
+
+  if (nextSibs.length > 0) {
+    nextSibs.forEach(function(sib) {
+      container.appendChild(sib);
+    });
+  }
+
+  return result;
 }
 
+function unmountComponent(reactComponent) {
+  var rootNode = React.findDOMNode(reactComponent);
+  var container = rootNode && rootNode.parentNode;
+
+  if (container) {
+    var siblings = [];
+    var sibling = container.firstChild;
+
+    while (sibling) {
+      var next = sibling.nextSibling;
+      if (sibling !== rootNode) {
+        siblings.push(sibling);
+        container.removeChild(sibling);
+      }
+      sibling = next;
+    }
+
+    React.unmountComponentAtNode(container);
 
-if (typeof exports === "object") {
-    ReactMeteor = exports
-} else {
-    ReactMeteor = {}
+    siblings.forEach(function (sib) {
+      container.appendChild(sib);
+    });
+  }
 }
 
-ReactMeteor.Mixin = ReactMeteorMixin
+ReactMeteor = {
+  Mixin: ReactMeteorMixin,
+
+  // So you don't have to mix in ReactMeteor.Mixin explicitly.
+  createClass: function createClass(spec) {
+    spec.mixins = spec.mixins || [];
+    spec.mixins.push(ReactMeteorMixin);
+    var Cls = React.createClass(spec);
+
+    if (Meteor.isClient &&
+        typeof Template === "function" &&
+        typeof spec.templateName === "string") {
+      var template = new Template(
+        spec.templateName,
+        function() {
+          // A placeholder HTML element that will serve as the mounting
+          // point for the React component. May have siblings!
+          return new HTML.SPAN;
+        }
+      );
+
+      template.onRendered(function() {
+        this._reactComponent = renderInPlaceOfNode(
+          // Equivalent to <Cls {...this.data} />:
+          React.createElement(Cls, this.data || {}),
+          this.find("span")
+        );
+      });
+
+      template.onDestroyed(function() {
+        unmountComponent(this._reactComponent);
+      });
+
+      Template[spec.templateName] = template;
+    }
+
+    return Cls;
+  }
+};