Merge pull request #298 from Robert-Frampton/documentcheck

Allow for parent element to be used in server side environments if document is defined as it is when using JSDom

README.md

@@ -1,7 +1,7 @@
 # Metal.js
 
 [![Build Status](https://img.shields.io/travis/metal/metal.js/master.svg?style=flat)](https://travis-ci.org/metal/metal.js)
-[![Slack Channel](http://metaljs-chat.wedeploy.io/badge.svg)](http://metaljs-chat.wedeploy.io/)
+Join #metal on our [Slack Channel](liferay-community.slack.com)
 
 [![Build Status](https://saucelabs.com/browser-matrix/metal-js.svg)](https://saucelabs.com/beta/builds/a0b06f2845e541c78db25576f2ddc501)
 

packages/metal-component/src/Component.js

@@ -123,13 +123,6 @@ class Component extends EventEmitter {
 		 */
 		this.initialConfig_ = opt_config || {};
 
-		/**
-		 * Whether the current environment is server side.
-		 * @type {boolean}
-		 * @protected
-		 */
-		this.serverSide_ = isServerSide();
-
 		/**
 		 * Whether the element was rendered.
 		 * @type {boolean}
@@ -142,7 +135,8 @@ class Component extends EventEmitter {
 		 * `attach`.
 		 * @type {!Element}
 		 */
-		this.DEFAULT_ELEMENT_PARENT = !this.serverSide_ ? document.body : null;
+		this.DEFAULT_ELEMENT_PARENT = typeof document !== 'undefined' ?
+			document.body : null;
 
 		this.setShouldUseFacade(true);
 		this.element = this.initialConfig_.element;
@@ -570,7 +564,7 @@ class Component extends EventEmitter {
 	 */
 	renderComponent(opt_parentElement) {
 		if (!this.hasRendererRendered_) {
-			if (!this.serverSide_ && window.__METAL_DEV_TOOLS_HOOK__) {
+			if (!isServerSide() && window.__METAL_DEV_TOOLS_HOOK__) {
 				window.__METAL_DEV_TOOLS_HOOK__(this);
 			}
 			this.getRenderer().render(this);

packages/metal-incremental-dom/src/render/patch.js

@@ -2,7 +2,6 @@
 
 import { append, exitDocument } from 'metal-dom';
 import { getData } from '../data';
-import { isServerSide } from 'metal';
 import { render } from './render';
 
 const patchingComponents_ = [];
@@ -17,7 +16,7 @@ const patchingComponents_ = [];
 function buildParentIfNecessary_(element) {
 	if (!element || !element.parentNode) {
 		let parent = {};
-		if (!isServerSide()) {
+		if (typeof document !== 'undefined') {
 			parent = document.createElement('div');
 		}
 		if (element) {

packages/metal-isomorphic/test/isomorphic.js

@@ -1,10 +1,13 @@
 import Component from 'metal-component';
 import MyComponent from './fixtures/MyComponent';
 import MyJSXComponent from './fixtures/MyJSXComponent';
+import jsdomGlobal from 'jsdom-global';
 import { assert } from 'chai';
 
 describe('Isomorphic Rendering', () => {
 	it('should render soy component to string', () => {
+		assert.ok(!global.document);
+
 		const htmlString = Component.renderToString(MyComponent, {
 			message: 'Hello, Soy!'
 		});
@@ -13,10 +16,64 @@ describe('Isomorphic Rendering', () => {
 	});
 
 	it('should render jsx component to string', () => {
+		assert.ok(!global.document);
+
 		const htmlString = Component.renderToString(MyJSXComponent, {
 			message: 'Hello, JSX!'
 		});
 
 		assert.equal(htmlString, '<div>Hello, JSX!</div>');
 	});
+
+	describe('JSDom', () => {
+		let cleanup;
+
+		before(() => {
+			cleanup = jsdomGlobal();
+		});
+
+		after(() => {
+			cleanup();
+		});
+
+		it('should render soy component to string', () => {
+			assert.ok(document);
+
+			const htmlString = Component.renderToString(MyComponent, {
+				message: 'Hello, Soy!'
+			});
+
+			assert.equal(htmlString, '<div>Hello, Soy!</div>');
+		});
+
+		it('should render soy component to DOM', () => {
+			assert.ok(document);
+
+			const comp = new MyComponent({
+				message: 'Hello, Soy!'
+			});
+
+			assert.equal(comp.element.innerHTML, '<div>Hello, Soy!</div>');
+		});
+
+		it('should render jsx component to string', () => {
+			assert.ok(document);
+
+			const htmlString = Component.renderToString(MyJSXComponent, {
+				message: 'Hello, JSX!'
+			});
+
+			assert.equal(htmlString, '<div>Hello, JSX!</div>');
+		});
+
+		it('should render JSX component to DOM', () => {
+			assert.ok(document);
+
+			const comp = new MyJSXComponent({
+				message: 'Hello, Soy!'
+			});
+
+			assert.equal(comp.element.innerHTML, '<div>Hello, Soy!</div>');
+		});
+	});
 });