Fix issue where root components were re-mounted instead of updated

Previously, the ObservedComponent was recreated with every update. This fixes the issue by using the same component for the lifespan of the element.

Author: chasenlehara

package.json

@@ -41,7 +41,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bitovi/react-to-can-webcomponent.git"
+    "url": "git+https://github.com/canjs/react-to-can-webcomponent.git"
   },
   "keywords": [
     "React",
@@ -51,7 +51,7 @@
   "author": "Bitovi",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/bitovi/react-to-can-webcomponent/issues"
+    "url": "https://github.com/canjs/react-to-can-webcomponent/issues"
   },
-  "homepage": "https://github.com/bitovi/react-to-can-webcomponent#readme"
+  "homepage": "https://github.com/canjs/react-to-can-webcomponent#readme"
 }

react-to-can-webcomponent-test.js

@@ -16,7 +16,16 @@ QUnit.module("react-to-can-webcomponent");
 
 
 QUnit.test("basics with react", function(assert) {
+	var mountCount = 0;
+	var unmountCount = 0;
+
 	class Welcome extends React.Component {
+		componentDidMount() {
+			mountCount += 1;
+		}
+		componentWillUnmount() {
+			unmountCount += 1;
+		}
 		render() {
 			return <h1>Hello, {
 				this.props.name
@@ -42,6 +51,8 @@ QUnit.test("basics with react", function(assert) {
 	myWelcome.name = "Justin";
 
 	assert.equal(myWelcome.childNodes[0].innerHTML, "Hello, Justin", "can update");
+	assert.equal(mountCount, 1, "component has only been mounted once");
+	assert.equal(unmountCount, 0, "component has not been unmounted");
 
 });
 

react-to-can-webcomponent.js

@@ -37,6 +37,11 @@ export default function(ReactComponent, React, ReactDOM) {
 	var targetPrototype = Object.create(HTMLElement.prototype);
 	targetPrototype.constructor = WebComponent;
 
+	var ObservedComponent = function(props) {
+		useObserver(React);
+		return React.createElement(ReactComponent, props);
+	};
+
 	// But have that prototype be wrapped in a proxy.
 	var proxyPrototype = new Proxy(targetPrototype, {
 		has: function (target, key) {
@@ -91,10 +96,7 @@ export default function(ReactComponent, React, ReactDOM) {
 			}, this);
 			rendering = true;
 			this[reactComponentSymbol] = ReactDOM.render(
-				React.createElement(props => {
-					useObserver(React);
-					return React.createElement(ReactComponent, props);
-				}, data),
+				React.createElement(ObservedComponent, data),
 				this
 			);
 			rendering = false;