Update to only warn if child contains components

README.md

@@ -1,6 +1,6 @@
 ![Deloitte Digital](https://raw.githubusercontent.com/DeloitteDigital/DDBreakpoints/master/docs/deloittedigital-logo-white.png)
 
-# React Habitat ![Build Status](https://travis-ci.org/DeloitteDigitalAPAC/react-habitat.svg?branch=develop)
+# React Habitat ![Build Status](https://travis-ci.org/DeloitteDigitalAPAC/react-habitat.svg?branch=master)
 
 ## React Habitat <3 Your CMS
 

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);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-habitat",
-  "version": "0.3.1-beta",
+  "version": "0.3.1",
   "description": "A React DOM Bootstrapper designed to harmonise a hybrid application",
   "main": "./lib/index.js",
   "repository": {
@@ -63,6 +63,7 @@
   },
   "files": [
     "LICENCE.md",
+    "CHANGELOG.md",
     "index.d.ts",
     "readme.md",
     "readme-in-es5.md",

readme-in-es5.md

@@ -1,6 +1,6 @@
 ![Deloitte Digital](https://raw.githubusercontent.com/DeloitteDigital/DDBreakpoints/master/docs/deloittedigital-logo-white.png)
 
-# React Habitat ![Build Status](https://travis-ci.org/DeloitteDigitalAPAC/react-habitat.svg?branch=develop)
+# React Habitat ![Build Status](https://travis-ci.org/DeloitteDigitalAPAC/react-habitat.svg?branch=master)
 
 ## React Habitat <3 Your CMS
 

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');