Adds Fragment component

packages/metal-jsx/src/Fragment.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import Component from './JSXComponent';
+
+/**
+ * JSXComponent that renders children passed in.
+ * @class
+ */
+class Fragment extends Component {
+	/**
+	 * @return {Component}
+	 */
+	render() {
+		return this.props.children;
+	}
+}
+
+Fragment.PROPS = {
+	elementClasses: {
+		setter: () => undefined,
+		validator: () => {
+			return new Error(
+				`Warning: passing 'elementClasses' to 'Fragment' will add class
+				 to first child element. This is not recommended.`
+			);
+		},
+	},
+};
+
+export default Fragment;

packages/metal-jsx/src/all/jsx.js

@@ -3,6 +3,7 @@
 import {validators, Config} from 'metal-state';
 import DangerouslySetHTML from '../DangerouslySetHTML';
 import JSXComponent from '../JSXComponent';
+import Fragment from '../Fragment';
 
 export default JSXComponent;
-export {DangerouslySetHTML, validators, Config, JSXComponent};
+export {DangerouslySetHTML, validators, Config, JSXComponent, Fragment};

packages/metal-jsx/test/Fragment.js

@@ -0,0 +1,78 @@
+'use strict';
+
+import Fragment from '../src/Fragment';
+import JSXComponent from '../src/JSXComponent';
+
+describe('Fragment', function() {
+	let component;
+
+	afterEach(function() {
+		if (component) {
+			component.dispose();
+		}
+	});
+
+	it('should render children with no wrapping element', function() {
+		class TestComponent extends JSXComponent {
+			render() {
+				return (
+					<div>
+						<Fragment>
+							<span>foo</span>
+							<span>bar</span>
+							<span>baz</span>
+						</Fragment>
+					</div>
+				);
+			}
+		}
+
+		component = new TestComponent();
+
+		assert.strictEqual(
+			'<span>foo</span><span>bar</span><span>baz</span>',
+			component.element.innerHTML
+		);
+	});
+
+	it('should render be able to map through fragments', function() {
+		class TestComponent extends JSXComponent {
+			render() {
+				return (
+					<div>
+						{[0, 1, 2].map(i => (
+							<Fragment key={i}>
+								<span>foo {i}</span>
+								<span>bar {i}</span>
+								<span>baz {i}</span>
+							</Fragment>
+						))}
+					</div>
+				);
+			}
+		}
+
+		component = new TestComponent();
+
+		assert.strictEqual(
+			'<span>foo 0</span><span>bar 0</span><span>baz 0</span><span>foo 1</span><span>bar 1</span><span>baz 1</span><span>foo 2</span><span>bar 2</span><span>baz 2</span>',
+			component.element.innerHTML
+		);
+	});
+
+	it('should not set elementClasses prop', function() {
+		class TestComponent extends JSXComponent {
+			render() {
+				return (
+					<Fragment elementClasses="test">
+						<span>foo</span>
+					</Fragment>
+				);
+			}
+		}
+
+		component = new TestComponent();
+
+		assert.strictEqual('<span>foo</span>', component.element.outerHTML);
+	});
+});