Fix #23 - Render canjs component only once on initial load

Override can-view-callbacks renderComponent function to when element
auto-mount is false the component isn't auto mounted

Author: ivospinheiro

can-react-component.js

@@ -3,6 +3,7 @@ var namespace = require("can-namespace");
 var assign = require("can-assign");
 var reflect = require("can-reflect");
 var canSymbol = require("can-symbol");
+var viewCallbacks = require("can-view-callbacks");
 var viewModelSymbol = canSymbol.for("can.viewModel");
 
 module.exports = namespace.reactComponent = function canReactComponent(displayName, CanComponent) {
@@ -11,6 +12,13 @@ module.exports = namespace.reactComponent = function canReactComponent(displayNa
 		displayName = (CanComponent.shortName || "CanComponent") + "Wrapper";
 	}
 
+	const __renderComponent = viewCallbacks._tags[CanComponent.prototype.tag];
+	viewCallbacks._tags[CanComponent.prototype.tag]= function renderComponent(el){
+		if(el.getAttribute("auto-mount") !== "false"){
+			__renderComponent.apply(this, arguments);
+		}
+	};
+
 	function Wrapper() {
 		React.Component.call(this);
 
@@ -47,6 +55,7 @@ module.exports = namespace.reactComponent = function canReactComponent(displayNa
 		render: function() { // eslint-disable-line react/display-name
 			return React.createElement(CanComponent.prototype.tag, {
 				ref: this.createComponent,
+				"auto-mount": "false"
 			});
 		}
 	});

test/test.js

@@ -143,4 +143,42 @@ QUnit.module('can-react-component', (moduleHooks) => {
 
 	});
 
+
+	QUnit.test('should be rendered only once', (assert) => {
+		assert.expect(3);
+		const ConsumedComponent = canReactComponent(
+			'ConsumedComponent',
+			CanComponent.extend('ConsumedComponent', {
+				tag: "consumed-component4",
+				ViewModel: {
+					first: {
+						type: 'string',
+						default: 'Ivo'
+					},
+					last: 'string',
+					name: {
+						get() {
+							return this.first + ' ' + this.last;
+						}
+					},
+					connectedCallback(el){
+						if(el.getAttribute("auto-mount") === "false") {
+							assert.equal(this.last, "Pinheiro", `'last' name should be 'Pinheiro'`);
+						}
+					}
+				},
+				view: stache("<div class='inner'>{{name}}</div>")
+			})
+		);
+
+		container.innerHTML="<consumed-component4></consumed-component4>";
+
+		let divComponent = document.querySelector('consumed-component4');
+		assert.equal(getTextFromFrag(divComponent), 'Ivo undefined');
+
+		ReactDOM.render(<ConsumedComponent last={"Pinheiro"} />, container);
+		divComponent = document.querySelector('consumed-component4');
+		assert.equal(getTextFromFrag(divComponent), 'Ivo Pinheiro');
+	});
+
 });