diff --git a/README.md b/README.md index fb66d296..b8a1f83c 100644 --- a/README.md +++ b/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) diff --git a/packages/metal-component/src/Component.js b/packages/metal-component/src/Component.js index 9cc89901..9d1c61ea 100644 --- a/packages/metal-component/src/Component.js +++ b/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); diff --git a/packages/metal-incremental-dom/src/render/patch.js b/packages/metal-incremental-dom/src/render/patch.js index 942e1557..501c815b 100644 --- a/packages/metal-incremental-dom/src/render/patch.js +++ b/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) { diff --git a/packages/metal-isomorphic/test/isomorphic.js b/packages/metal-isomorphic/test/isomorphic.js index 5ae3c923..7152991e 100644 --- a/packages/metal-isomorphic/test/isomorphic.js +++ b/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, '
Hello, JSX!
'); }); + + 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, '
Hello, Soy!
'); + }); + + it('should render soy component to DOM', () => { + assert.ok(document); + + const comp = new MyComponent({ + message: 'Hello, Soy!' + }); + + assert.equal(comp.element.innerHTML, '
Hello, Soy!
'); + }); + + it('should render jsx component to string', () => { + assert.ok(document); + + const htmlString = Component.renderToString(MyJSXComponent, { + message: 'Hello, JSX!' + }); + + assert.equal(htmlString, '
Hello, JSX!
'); + }); + + it('should render JSX component to DOM', () => { + assert.ok(document); + + const comp = new MyJSXComponent({ + message: 'Hello, Soy!' + }); + + assert.equal(comp.element.innerHTML, '
Hello, Soy!
'); + }); + }); });