Stops allowing State to receive new properties dynamically

robframpton · Oct 24, 2016 · fa26e7c · fa26e7c
1 parent 480c948
commit fa26e7c
Show file tree

Hide file tree

Showing 10 changed files with 213 additions and 368 deletions.
diff --git a/packages/metal-component/src/Component.js b/packages/metal-component/src/Component.js
@@ -9,7 +9,8 @@ import {
 	isFunction,
 	isObject,
 	isString,
-	mergeSuperClassesProperty
+	mergeSuperClassesProperty,
+	object
 } from 'metal';
 import { toElement } from 'metal-dom';
 import ComponentDataManager from './ComponentDataManager';
@@ -123,7 +124,6 @@ class Component extends EventEmitter {
 		this.renderer_.on('rendered', this.handleRendererRendered_.bind(this));
 
 		this.dataManager_ = this.createDataManager();
-		this.renderer_.handleDataManagerCreated_();
 
 		this.on('stateChanged', this.handleStateChanged_);
 		this.on('eventsChanged', this.onEventsChanged_);
@@ -223,7 +223,10 @@ class Component extends EventEmitter {
 	 */
 	createDataManager() {
 		mergeSuperClassesProperty(this.constructor, 'DATA_MANAGER', array.firstDefinedValue);
-		return new this.constructor.DATA_MANAGER_MERGED(this, Component.DATA);
+		return new this.constructor.DATA_MANAGER_MERGED(
+			this,
+			object.mixin({}, Component.DATA, this.getRenderer().getExtraDataConfig())
+		);
 	}
 
 	/**

diff --git a/packages/metal-component/src/ComponentDataManager.js b/packages/metal-component/src/ComponentDataManager.js
@@ -24,16 +24,6 @@ class ComponentDataManager extends EventEmitter {
 		this.createState_(data, this.component_);
 	}
 
-	/**
-	 * Adds a state property to the component.
-	 * @param {string} name
-	 * @param {!Object} config
-	 * @param {*} opt_initialValue
-	 */
-	add() {
-		this.state_.addToState(...arguments);
-	}
-
 	/**
 	 * Builds the configuration data that will be passed to the `State` instance.
 	 * @param {!Object} data
@@ -51,13 +41,9 @@ class ComponentDataManager extends EventEmitter {
 	 * @protected
 	 */
 	createState_(data, holder, define) {
-		const state = new State({}, holder, this.component_);
+		const state = new State(this.component_.getInitialConfig(), holder, this.component_);
 		state.setKeysBlacklist_(this.constructor.BLACKLIST_MERGED);
-		state.addToState(
-			this.buildStateInstanceData_(data),
-			this.component_.getInitialConfig(),
-			define
-		);
+		state.configState(this.buildStateInstanceData_(data), define);
 		this.state_ = state;
 	}
 

diff --git a/packages/metal-component/src/ComponentRenderer.js b/packages/metal-component/src/ComponentRenderer.js
@@ -50,8 +50,12 @@ class ComponentRenderer extends EventEmitter {
 		return this.component_;
 	}
 
-	handleDataManagerCreated_() {
-
+	/**
+	 * Returns extra configuration for data that should be added to the manager.
+	 * @return {Object}
+	 */
+	getExtraDataConfig() {
+		return null;
 	}
 
 	/**

diff --git a/packages/metal-component/test/ComponentDataManager.js b/packages/metal-component/test/ComponentDataManager.js
@@ -60,16 +60,6 @@ describe('ComponentDataManager', function() {
 		assert.strictEqual('fooValue', component.foo);
 	});
 
-	it('should add the state properties via the "add" function', function() {
-		component = new Component();
-		manager = new ComponentDataManager(component, {});
-		manager.add('foo', {
-			value: 'fooValue'
-		});
-
-		assert.strictEqual('fooValue', component.foo);
-	});
-
 	it('should replace all non internal data with given values or default', function() {
 		class TestComponent extends Component {
 		}

diff --git a/packages/metal-jsx/src/JSXDataManager.js b/packages/metal-jsx/src/JSXDataManager.js
@@ -77,7 +77,7 @@ class JSXDataManager extends ComponentDataManager {
 		this.state_.setEventData({
 			type: 'state'
 		});
-		this.state_.addToState(this.component_.constructor.STATE_MERGED, {}, define);
+		this.state_.configState(this.component_.constructor.STATE_MERGED, define);
 	}
 
 	/**

diff --git a/packages/metal-jsx/test/JSXDataManager.js b/packages/metal-jsx/test/JSXDataManager.js
@@ -56,21 +56,6 @@ describe('JSXDataManager', function() {
 			assert.strictEqual('defaultFoo', component.state.foo);
 		});
 
-		it('should automatically make all STATE properties "internal"', function() {
-			class TestComponent extends Component {
-			}
-			TestComponent.DATA_MANAGER = JSXDataManager;
-			TestComponent.STATE = {
-				foo: {
-					value: 'defaultFoo'
-				}
-			};
-
-			component = new TestComponent();
-			var stateInstance = component.getDataManager().getStateInstance();
-			assert.ok(stateInstance.getStateKeyConfig('foo').internal);
-		});
-
 		it('should not include default component data in "state"', function() {
 			class TestComponent extends Component {
 			}
@@ -166,20 +151,6 @@ describe('JSXDataManager', function() {
 			assert.strictEqual('defaultPropsFoo', manager.get('foo'));
 		});
 
-		it('should add value to "props" when "add" is called', function() {
-			class TestComponent extends Component {
-			}
-			TestComponent.DATA_MANAGER = JSXDataManager;
-
-			component = new TestComponent();
-
-			var manager = component.getDataManager();
-			manager.add('foo', {
-				value: 'defaultFoo'
-			});
-			assert.strictEqual('defaultFoo', component.props.foo);
-		});
-
 		it('should return keys from "props" when "getSyncKeys" is called', function() {
 			class TestComponent extends Component {
 			}

diff --git a/packages/metal-soy/src/Soy.js b/packages/metal-soy/src/Soy.js
@@ -15,7 +15,7 @@ class Soy extends IncrementalDomRenderer {
 	 * Adds the template params to the component's state, if they don't exist yet.
 	 * @protected
 	 */
-	addMissingStateKeys_() {
+	getExtraDataConfig() {
 		var elementTemplate = this.component_.constructor.TEMPLATE;
 		if (!isFunction(elementTemplate)) {
 			return;
@@ -26,12 +26,13 @@ class Soy extends IncrementalDomRenderer {
 
 		var keys = elementTemplate.params || [];
 		var component = this.component_;
-		var state = component.getDataManager().getStateInstance();
+		var configs = {};
 		for (var i = 0; i < keys.length; i++) {
-			if (!state.hasStateKey(keys[i]) && !component[keys[i]]) {
-				state.addToState(keys[i], {}, component.getInitialConfig()[keys[i]]);
+			if (!component[keys[i]]) {
+				configs[keys[i]] = {};
 			}
 		}
+		return configs;
 	}
 
 	/**
@@ -80,14 +81,6 @@ class Soy extends IncrementalDomRenderer {
 		};
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	handleDataManagerCreated_() {
-		super.handleDataManagerCreated_();
-		this.addMissingStateKeys_();
-	}
-
 	/**
 	 * Handles an intercepted soy template call. If the call is for a component's
 	 * main template, then it will be replaced with a call that incremental dom

diff --git a/packages/metal-soy/test/Soy.js b/packages/metal-soy/test/Soy.js
@@ -78,9 +78,7 @@ describe('Soy', function() {
 
 			it('should not trigger update when changed state key is not used by template', function(done) {
 				comp = new HelloWorldComponent();
-				comp.getDataManager().getStateInstance().addToState('foo');
-
-				comp.foo = 'Bar';
+				comp.visible = false;
 				comp.once('stateSynced', function() {
 					assert.strictEqual(0, IncrementalDOM.patchOuter.callCount);
 					done();
@@ -105,7 +103,7 @@ describe('Soy', function() {
 					return true;
 				};
 				comp = new HelloWorldComponent();
-				comp.getDataManager().getStateInstance().addToState('foo');
+				comp.visible = false;
 
 				comp.foo = 'Bar';
 				comp.once('stateSynced', function() {