Export utility for passing props for higher order components

packages/metal-jsx/src/JSXComponent.js

@@ -7,6 +7,7 @@ import DangerouslySetHTML from './DangerouslySetHTML';
 import IncrementalDomRenderer from 'metal-incremental-dom';
 import JSXDataManager from './JSXDataManager';
 import JSXRenderer from './JSXRenderer';
+import otherProps from './otherProps';
 
 /**
  * A component that has built-in integration with JSX templates. Example:
@@ -39,4 +40,4 @@ JSXComponent.DATA_MANAGER = JSXDataManager;
 JSXComponent.RENDERER = JSXRenderer;
 
 export default JSXComponent;
-export { DangerouslySetHTML, validators, Config, JSXComponent };
+export { DangerouslySetHTML, validators, Config, JSXComponent, otherProps };

packages/metal-jsx/src/otherProps.js

@@ -0,0 +1,24 @@
+'use strict';
+
+import { object } from 'metal';
+
+/**
+ * Returns props that are not used or declared in the component.
+ * @param {Component} component Instance of metal-jsx component
+ * @return {Object} Object containing props
+ */
+export default function otherProps(component) {
+	const removeKeys = [...component.getDataManager().getPropsInstance(component).getStateKeys(), 'key', 'ref'];
+
+	const retObj = object.mixin({}, component.props);
+
+	for (let i = 0; i < removeKeys.length; i++) {
+		const key = removeKeys[i];
+
+		if (retObj.hasOwnProperty(key)) {
+			delete retObj[key];
+		}
+	}
+
+	return retObj;
+}

packages/metal-jsx/test/otherProps.js

@@ -0,0 +1,54 @@
+'use strict';
+
+import JSXComponent from '../src/JSXComponent';
+import otherProps from '../src/otherProps';
+
+describe('otherProps', function() {
+	var component;
+
+	afterEach(function() {
+		if (component) {
+			component.dispose();
+		}
+	});
+
+	it('should return object', function() {
+		class TestComponent extends JSXComponent {
+			render() {
+				return <div />;
+			}
+		}
+
+		assert.deepEqual(otherProps(new TestComponent()), {});
+	});
+
+	it('should pass through unspecified props', function() {
+		class TestComponent extends JSXComponent {
+			render() {
+				return <div />;
+			}
+		}
+
+		TestComponent.PROPS = {
+			foo: {},
+		};
+
+		assert.deepEqual(
+			otherProps(new TestComponent({baz: 'qux', foo: 'bar'})),
+			{baz: 'qux'}
+		);
+	});
+
+	it('should ignore key and ref', function() {
+		class TestComponent extends JSXComponent {
+			render() {
+				return <div />;
+			}
+		}
+
+		assert.deepEqual(
+			otherProps(new TestComponent({key: 'bar', ref: 'qux'})),
+			{}
+		);
+	});
+});