Reuse props/state configured object in JSXDataManager

TODO: Remove feature of adding state keys dinamically.
robframpton · Oct 24, 2016 · 59067e7 · 59067e7
1 parent c37580e
commit 59067e7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 26 deletions.
diff --git a/packages/metal-component/src/Component.js b/packages/metal-component/src/Component.js
@@ -694,6 +694,11 @@ class Component extends EventEmitter {
  * @static
  */
 Component.DATA = {
+	children: {
+		validator: Array.isArray,
+		value: []
+	},
+
 	/**
 	 * CSS classes to be applied to the element.
 	 * @type {string}

diff --git a/packages/metal-component/src/ComponentDataManager.js b/packages/metal-component/src/ComponentDataManager.js
@@ -50,12 +50,13 @@ class ComponentDataManager extends EventEmitter {
 	 * @param {!Object} holder The object that should hold the data properties.
 	 * @protected
 	 */
-	createState_(data, holder) {
+	createState_(data, holder, define) {
 		const state = new State({}, holder, this.component_);
 		state.setKeysBlacklist_(this.constructor.BLACKLIST_MERGED);
 		state.addToState(
 			this.buildStateInstanceData_(data),
-			this.component_.getInitialConfig()
+			this.component_.getInitialConfig(),
+			define
 		);
 		this.state_ = state;
 	}

diff --git a/packages/metal-component/test/Component.js b/packages/metal-component/test/Component.js
@@ -284,7 +284,7 @@ describe('Component', function() {
 
 		it('should return an array with all state property names', function() {
 			comp = new Component();
-			var expected = ['elementClasses', 'events', 'visible'];
+			var expected = ['children', 'elementClasses', 'events', 'visible'];
 			assert.deepEqual(expected, comp.getStateKeys().sort());
 		});
 
@@ -293,6 +293,7 @@ describe('Component', function() {
 				elementClasses: 'myClass'
 			});
 			var expected = {
+				children: [],
 				elementClasses: 'myClass',
 				events: null,
 				visible: true

diff --git a/packages/metal-incremental-dom/src/IncrementalDomRenderer.js b/packages/metal-incremental-dom/src/IncrementalDomRenderer.js
@@ -361,24 +361,6 @@ class IncrementalDomRenderer extends ComponentRenderer {
 		}
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	handleDataManagerCreated_() {
-		super.handleDataManagerCreated_();
-
-		var manager = this.component_.getDataManager();
-
-		manager.add(
-			'children',
-			{
-				validator: Array.isArray,
-				value: emptyChildren_
-			},
-			this.config_.children || emptyChildren_
-		);
-	}
-
 	/**
 	 * Handles the `dataPropChanged` event. Stores data that has changed since the
 	 * last render.

diff --git a/packages/metal-jsx/src/JSXDataManager.js b/packages/metal-jsx/src/JSXDataManager.js
@@ -52,19 +52,32 @@ class JSXDataManager extends ComponentDataManager {
 	 * @override
 	 */
 	createState_(data) {
-		this.component_.props = {};
-		super.createState_(data, this.component_.props);
+		var define = false;
+		if (!this.component_.constructor.hasOwnProperty('__PROPS_PROTOTYPE__')) {
+			this.component_.constructor.__PROPS_PROTOTYPE__ = {};
+			this.component_.constructor.__STATE_PROTOTYPE__ = {};
+			define = null;
+		}
+
+		this.component_.props = this.component_.constructor.__PROPS_PROTOTYPE__;
+		if (define === false) {
+			this.component_.props = Object.create(this.component_.props);
+		}
+		super.createState_(data, this.component_.props, define);
 		this.props_ = this.state_;
 		this.addUnconfiguredProps_(this.component_.getInitialConfig());
 
-		this.component_.state = {};
+		this.component_.state = this.component_.constructor.__STATE_PROTOTYPE__;
+		if (define === false) {
+			this.component_.state = Object.create(this.component_.state);
+		}
 		this.state_ = new State({}, this.component_.state, this.component_, {
 			internal: true
 		});
 		this.state_.setEventData({
 			type: 'state'
 		});
-		this.state_.addToState(this.component_.constructor.STATE_MERGED);
+		this.state_.addToState(this.component_.constructor.STATE_MERGED, {}, define);
 	}
 
 	/**

diff --git a/packages/metal-jsx/test/JSXDataManager.js b/packages/metal-jsx/test/JSXDataManager.js
@@ -195,7 +195,7 @@ describe('JSXDataManager', function() {
 
 			component = new TestComponent();
 			var manager = component.getDataManager();
-			var expected = ['elementClasses', 'events', 'foo', 'visible'];
+			var expected = ['children', 'elementClasses', 'events', 'foo', 'visible'];
 			assert.deepEqual(expected, manager.getSyncKeys().sort());
 		});
 	});