Updates CHANGELOG for v2.15.1

LICENSE.md

@@ -1,6 +1,6 @@
 # Software License Agreement (BSD License)
 
-Copyright (c) 2017, Liferay Inc.
+Copyright (c) 2018, Liferay Inc.
 All rights reserved.
 
 Redistribution and use of this software in source and binary forms, with or without modification, are

README.md

@@ -34,6 +34,10 @@ Metal.js is a JavaScript library for building UI components in a solid, flexible
 ## Developer Tools for Metal.js
 * [Chrome Extension](https://chrome.google.com/webstore/detail/metaljs-developer-tools/fagnjmppkokolnbloalifcmcooldhiik)
 
+## Big Thanks
+
+Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com)
+
 ## License
 
 [BSD License](https://github.com/metal/metal.js/blob/master/LICENSE.md) © Liferay, Inc.

packages/metal-component/src/Component.js

@@ -132,6 +132,13 @@ class Component extends EventEmitter {
 		 */
 		this.initialConfig_ = config || {};
 
+		/**
+		 * Indicates whether the component should be rendered as a Portal, outside
+		 * of the parent component.
+		 * @type {string|Element|boolean}
+		 */
+		this.portalElement = null;
+
 		/**
 		 * Whether the element was rendered.
 		 * @type {boolean}
@@ -154,6 +161,8 @@ class Component extends EventEmitter {
 		this.setUpDataManager_();
 		this.setUpSyncUpdates_();
 
+		this.setUpPortal_(this.initialConfig_.portalElement);
+
 		this.on('stateWillChange', this.handleStateWillChange_);
 		this.on('stateChanged', this.handleComponentStateChanged_);
 		this.on('eventsChanged', this.onEventsChanged_);
@@ -658,6 +667,42 @@ class Component extends EventEmitter {
 		);
 	}
 
+	/**
+	 * Overwrites element property if portalElement is passed. Creates
+	 * a nested placeholder so that portalElement is not removed from the
+	 * DOM when component first renders. When portalElement is equal to true,
+	 * component is appeneded to the body.
+	 *
+	 * @param {string|Element|boolean} portalElement
+	 */
+	setUpPortal_(portalElement) {
+		if (
+			!isElement(portalElement) &&
+			!isString(portalElement) &&
+			!isBoolean(portalElement)
+		) {
+			return;
+		} else if (isBoolean(portalElement) && portalElement) {
+			portalElement = 'body';
+		}
+
+		if (isServerSide()) {
+			this.portalElement = true;
+			return;
+		}
+
+		portalElement = toElement(portalElement);
+
+		if (portalElement) {
+			const placeholder = document.createElement('div');
+
+			portalElement.appendChild(placeholder);
+
+			this.element = placeholder;
+			this.portalElement = portalElement;
+		}
+	}
+
 	/**
 	 * Sets up the component's renderer.
 	 * @protected

packages/metal-component/test/Component.js

@@ -1152,6 +1152,60 @@ describe('Component', function() {
 		sinon.assert.calledWith(hookStub, comp);
 	});
 
+	it('should render component to portalElement', function() {
+		const portalElement = document.createElement('span');
+
+		comp = Component.render(Component, {
+			portalElement,
+		});
+
+		assert.strictEqual(comp.element.parentNode, portalElement);
+		assert.strictEqual(comp.portalElement, portalElement);
+	});
+
+	it('should set portalElement from selector', function() {
+		const portalElement = document.createElement('div');
+		portalElement.setAttribute('id', 'foo');
+
+		document.body.appendChild(portalElement);
+
+		comp = Component.render(Component, {
+			portalElement: '#foo',
+		});
+
+		assert.strictEqual(comp.element.parentNode, portalElement);
+	});
+
+	it('should set portalElement to body when set to true', function() {
+		const parentElement = document.createElement('span');
+
+		document.body.appendChild(parentElement);
+
+		comp = Component.render(
+			Component,
+			{
+				portalElement: true,
+			},
+			parentElement
+		);
+
+		assert.strictEqual(comp.element.parentNode, document.body);
+	});
+
+	it('should detach component from DOM when portalElement is passed', function() {
+		const portalElement = document.createElement('span');
+
+		comp = Component.render(Component, {
+			portalElement,
+		});
+
+		assert.ok(comp.inDocument);
+
+		comp.dispose();
+
+		assert.ok(!comp.inDocument);
+	});
+
 	function createCustomComponentClass(rendererContentOrFn) {
 		class CustomComponent extends Component {}
 		CustomComponent.RENDERER = createCustomRenderer(rendererContentOrFn);

packages/metal-incremental-dom/src/IncrementalDomRenderer.js

@@ -35,7 +35,9 @@ class IncrementalDomRenderer extends ComponentRenderer.constructor {
 			for (let i = 0; i < data.childComponents.length; i++) {
 				const child = data.childComponents[i];
 				if (!child.isDisposed()) {
-					child.element = null;
+					if (!child.portalElement) {
+						child.element = null;
+					}
 					child.dispose();
 				}
 			}

packages/metal-incremental-dom/src/cleanup/unused.js

@@ -20,7 +20,9 @@ export function disposeUnused() {
 		if (!comp.isDisposed() && !getData(comp).parent) {
 			// Don't let disposing cause the element to be removed, since it may
 			// be currently being reused by another component.
-			comp.element = null;
+			if (!comp.portalElement) {
+				comp.element = null;
+			}
 			comp.dispose();
 		}
 	}

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

@@ -17,6 +17,7 @@ import {
 	isDef,
 	isDefAndNotNull,
 	isFunction,
+	isServerSide,
 	isString,
 	object,
 } from 'metal';
@@ -537,7 +538,14 @@ function renderSubComponent_(tagOrCtor, config, owner) {
 		config.key = parentData.config.key;
 	}
 
-	comp.getRenderer().renderInsidePatch(comp);
+	if (comp.portalElement && isServerSide()) {
+		return comp;
+	}
+
+	if (!comp.portalElement) {
+		comp.getRenderer().renderInsidePatch(comp);
+	}
+
 	if (!comp.wasRendered) {
 		comp.renderComponent();
 	}