Update to only warn if child contains components

- Remove logic warning of any children from Habitat.js
- Add logic to check if element contains any elements with an attribute
matching the custom selector to Bootstrapper.js and add new warning
for this case
- Update tests and build

Fixes #5

dist/react-habitat.js

@@ -231,6 +231,9 @@ return /******/ (function(modules) { // webpackBootstrap
 			var component = container.resolve(componentName);
 
 			if (component) {
+				if (ele.querySelector('[' + componentSelector + ']')) {
+					_Logger2.default.warn('RHW08', 'React Habitat should not contain additional components.', ele);
+				}
 				factory.inject(component, _Habitat2.default.parseProps(ele), _Habitat2.default.create(ele, id));
 			} else {
 				_Logger2.default.error('RHW01', 'Cannot resolve component "' + componentName + '" for element.', ele);
@@ -710,11 +713,6 @@ return /******/ (function(modules) { // webpackBootstrap
 					// Not an input so assumed we don't need to keep the target
 					// element around
 
-					// Check it is empty first (ignoring white space and line breaks)
-					if (ele.innerHTML.replace(/( |\r\n|\n|\r)/g, '') !== '') {
-						_Logger2.default.warn('RHW05', 'React Habitat element not empty.', ele);
-					}
-
 					if (!replaceDisabled) {
 						// Detach it
 						var host = ele.parentNode.removeChild(ele);

lib/Bootstrapper.js

@@ -47,6 +47,9 @@ function parseContainer(container, elements, componentSelector) {
 		var component = container.resolve(componentName);
 
 		if (component) {
+			if (ele.querySelector('[' + componentSelector + ']')) {
+				_Logger2.default.warn('RHW08', 'React Habitat should not contain additional components.', ele);
+			}
 			factory.inject(component, _Habitat2.default.parseProps(ele), _Habitat2.default.create(ele, id));
 		} else {
 			_Logger2.default.error('RHW01', 'Cannot resolve component "' + componentName + '" for element.', ele);

lib/Habitat.js

@@ -193,11 +193,6 @@ var Habitat = function () {
 				// Not an input so assumed we don't need to keep the target
 				// element around
 
-				// Check it is empty first (ignoring white space and line breaks)
-				if (ele.innerHTML.replace(/( |\r\n|\n|\r)/g, '') !== '') {
-					_Logger2.default.warn('RHW05', 'React Habitat element not empty.', ele);
-				}
-
 				if (!replaceDisabled) {
 					// Detach it
 					var host = ele.parentNode.removeChild(ele);

src/Bootstrapper.js

@@ -30,6 +30,9 @@ function parseContainer(container, elements, componentSelector, cb = null) {
 		const component = container.resolve(componentName);
 
 		if (component) {
+			if (ele.querySelector(`[${componentSelector}]`)) {
+				Logger.warn('RHW08', 'React Habitat should not contain additional components.', ele);
+			}
 			factory.inject(
 				component,
 				Habitat.parseProps(ele),

src/Habitat.js

@@ -7,7 +7,6 @@
  */
 import Logger from './Logger';
 
-
 const HABITAT_HOST_KEY = 	'habitatHostElement';
 const HABITAT_NAMESPACE = 	'data-habitat';
 const ACTIVE_HABITAT_FLAG = 'data-has-habitat';
@@ -174,11 +173,6 @@ export default class Habitat {
 			// Not an input so assumed we don't need to keep the target
 			// element around
 
-			// Check it is empty first (ignoring white space and line breaks)
-			if (ele.innerHTML.replace(/( |\r\n|\n|\r)/g,'') !== '') {
-				Logger.warn('RHW05', 'React Habitat element not empty.', ele);
-			}
-
 			if (!replaceDisabled) {
 				// Detach it
 				const host = ele.parentNode.removeChild(ele);

tests/Bootstrapper.spec.js

@@ -117,10 +117,10 @@ describe('Bootstrapper', () => {
 		expect(component2Lookup.length).toEqual(1);
 	});
 
-	it('should not render to elements that have children', () => {
+	it('should warn when rendering to elements that have components as children', () => {
 		spyOn(console, 'warn');
 
-		const html = '<div data-component="IMochComponent"><p>Child</p></div>';
+		const html = '<div data-component="IMochComponent"><div data-component="IMochComponent"></div></div>';
 		node.innerHTML = html;
 
 		// -- MOCH CONTAINER SET UP -- //
@@ -134,6 +134,46 @@ describe('Bootstrapper', () => {
 
 	});
 
+	it('should not warn when rendering to elements that have children that are not components', () => {
+		spyOn(console, 'warn');
+
+		const html = '<div data-component="IMochComponent"><p>Hello world</p></div>';
+		node.innerHTML = html;
+
+		// -- MOCH CONTAINER SET UP -- //
+		const container = new Container();
+		container.register('IMochComponent', MochComponent);
+		// --------------------------- //
+
+		const app = new App(container);
+
+		expect(console.warn).not.toHaveBeenCalled();
+
+	});
+
+	it('should render to elements that have children that are not components', () => {
+		spyOn(console, 'warn');
+
+		const html = '<div data-component="IMochComponent"><p>Child</p></div>';
+		node.innerHTML = html;
+
+		// -- MOCH CONTAINER SET UP -- //
+		const container = new Container();
+		container.register('IMochComponent', MochComponent);
+		// --------------------------- //
+
+		const app = new App(container);
+
+		expect(console.warn).not.toHaveBeenCalled();
+
+		const componentLookup = node.innerHTML.match(/\[component MochComponent\]/g);
+
+		expect(app).toBeDefined();
+		expect(componentLookup).not.toEqual(null);
+		expect(componentLookup.length).toEqual(1);
+
+	});
+
 	it('should render to elements with white space and line breaks', () => {
 		node.innerHTML =
 			'<div data-component="IMochComponent">  \n   \n</div>';

tests/Habitat.spec.js

@@ -188,21 +188,6 @@ describe('Habitat create', () => {
 
 	});
 
-	it('should throw non empty target error', () => {
-
-		spyOn(console, 'warn');
-
-		const testElement = window.document.createElement('div');
-		testElement.innerHTML = '<p>test</p>';
-
-		node.appendChild(testElement);
-
-		Habitat.create(testElement, 'C01');
-
-		expect(console.warn).toHaveBeenCalled();
-
-	});
-
 	it('should leave inputs in the dom', () => {
 
 		const testElement = window.document.createElement('input');