Replaces mergeSuperClassesProperty with getStaticProperty

packages/metal-component/src/Component.js

@@ -1,15 +1,14 @@
 'use strict';
 
 import {
-	array,
 	getFunctionName,
+	getStaticProperty,
 	isBoolean,
 	isDefAndNotNull,
 	isElement,
 	isFunction,
 	isObject,
 	isString,
-	mergeSuperClassesProperty,
 	object
 } from 'metal';
 import { DomEventEmitterProxy, toElement } from 'metal-dom';
@@ -127,16 +126,11 @@ class Component extends EventEmitter {
 		 */
 		this.DEFAULT_ELEMENT_PARENT = document.body;
 
-		mergeSuperClassesProperty(this.constructor, 'DATA_MANAGER', array.firstDefinedValue);
-		mergeSuperClassesProperty(this.constructor, 'ELEMENT_CLASSES', this.mergeElementClasses_);
-		mergeSuperClassesProperty(this.constructor, 'RENDERER', array.firstDefinedValue);
-		mergeSuperClassesProperty(this.constructor, 'SYNC_UPDATES', array.firstDefinedValue);
-
 		this.setShouldUseFacade(true);
 		this.element = this.initialConfig_.element;
 
 		this.renderer_ = this.createRenderer();
-		this.dataManager_ = this.constructor.DATA_MANAGER_MERGED;
+		this.dataManager_ = getStaticProperty(this.constructor, 'DATA_MANAGER');
 		this.dataManager_.setUp(
 			this,
 			object.mixin({}, this.renderer_.getExtraDataConfig(), Component.DATA)
@@ -242,7 +236,8 @@ class Component extends EventEmitter {
 	 * @return {!ComponentRenderer}
 	 */
 	createRenderer() {
-		return new this.constructor.RENDERER_MERGED(this);
+		const RendererCtor = getStaticProperty(this.constructor, 'RENDERER');
+		return new RendererCtor(this);
 	}
 
 	/**
@@ -486,21 +481,14 @@ class Component extends EventEmitter {
 	}
 
 	/**
-	 * Merges an array of values for the ELEMENT_CLASSES property into a single object.
-	 * @param {!Array.<string>} values The values to be merged.
-	 * @return {!string} The merged value.
+	 * Merges two values for the ELEMENT_CLASSES property into a single one.
+	 * @param {string} val1
+	 * @param {string} val2
+	 * @return {string} The merged value.
 	 * @protected
 	 */
-	mergeElementClasses_(values) {
-		var marked = {};
-		return values.filter(function(val) {
-			if (!val || marked[val]) {
-				return false;
-			} else {
-				marked[val] = true;
-				return true;
-			}
-		}).join(' ');
+	mergeElementClasses_(val1, val2) {
+		return val1 ? val1 + ' ' + (val2 || '') : val2;
 	}
 
 	/**
@@ -641,8 +629,13 @@ class Component extends EventEmitter {
 	 * @protected
 	 */
 	setterElementClassesFn_(val) {
-		if (this.constructor.ELEMENT_CLASSES_MERGED) {
-			val += ' ' + this.constructor.ELEMENT_CLASSES_MERGED;
+		const elementClasses = getStaticProperty(
+			this.constructor,
+			'ELEMENT_CLASSES',
+			this.mergeElementClasses_
+		);
+		if (elementClasses) {
+			val += ' ' + elementClasses;
 		}
 		return val.trim();
 	}

packages/metal-component/src/ComponentDataManager.js

@@ -24,7 +24,7 @@ const ComponentDataManager = {
 		const state = new State(component.getInitialConfig(), component, component);
 		state.setKeysBlacklist_(this.BLACKLIST);
 		state.configState(
-			object.mixin({}, data, component.constructor.STATE_MERGED)
+			object.mixin({}, data, State.getStateStatic(component.constructor))
 		);
 		this.getManagerData(component).state_ = state;
 	},
@@ -137,7 +137,6 @@ const ComponentDataManager = {
 	 */
 	setUp(component, data) {
 		component.__DATA_MANAGER_DATA__ = {};
-		State.mergeStateStatic(component.constructor);
 		this.createState_(component, data);
 	}
 };

packages/metal-component/src/ComponentRenderer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { Disposable } from 'metal';
+import { getStaticProperty, Disposable } from 'metal';
 
 /**
  * Base class that component renderers should extend from. It defines the
@@ -16,7 +16,8 @@ class ComponentRenderer extends Disposable {
 		super();
 		this.component_ = component;
 
-		if (this.component_.constructor.SYNC_UPDATES_MERGED) {
+		this.syncUpdates_ = getStaticProperty(component.constructor, 'SYNC_UPDATES');
+		if (this.hasSyncUpdates()) {
 			this.component_.on(
 				'stateKeyChanged',
 				this.handleRendererStateKeyChanged_.bind(this)
@@ -68,6 +69,14 @@ class ComponentRenderer extends Disposable {
 		}
 	}
 
+	/**
+	 * Checks if this component has sync updates enabled.
+	 * @return {boolean}
+	 */
+	hasSyncUpdates() {
+		return this.syncUpdates_;
+	}
+
 	/**
 	 * Renders the component's whole content (including its main element).
 	 */
@@ -94,8 +103,7 @@ class ComponentRenderer extends Disposable {
 	 *     (newVal) and previous (prevVal) values.
 	 */
 	sync(changes) {
-		if (!this.component_.constructor.SYNC_UPDATES_MERGED &&
-			this.shouldRerender_()) {
+		if (!this.hasSyncUpdates() && this.shouldRerender_()) {
 			this.update(changes);
 		}
 	}

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

@@ -36,7 +36,7 @@ class IncrementalDomRenderer extends ComponentRenderer {
 		// functions each time.
 		this.renderInsidePatchDontSkip_ = this.renderInsidePatchDontSkip_.bind(this);
 
-		if (!this.component_.constructor.SYNC_UPDATES_MERGED) {
+		if (!this.hasSyncUpdates()) {
 			// If the component is being updated synchronously we'll just reuse the
 			// `handleRendererStateKeyChanged_` function from `ComponentRenderer`.
 			this.component_.on('stateKeyChanged', this.handleStateKeyChanged_.bind(this));

packages/metal-jsx/src/JSXDataManager.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { mergeSuperClassesProperty, object } from 'metal';
+import { getStaticProperty, object } from 'metal';
 import { ComponentDataManager } from 'metal-component';
 import State from 'metal-state';
 
@@ -40,18 +40,19 @@ object.mixin(JSXDataManager, {
 		comp.state = {};
 		const data = this.getManagerData(comp);
 
-		mergeSuperClassesProperty(ctor, 'PROPS', State.mergeState);
 		data.props_ = new State(comp.getInitialConfig(), comp.props, comp);
-		data.props_.configState(
-			object.mixin({}, config, comp.constructor.PROPS_MERGED)
-		);
+		data.props_.configState(object.mixin(
+			{},
+			config,
+			getStaticProperty(ctor, 'PROPS', State.mergeState)
+		));
 		this.addUnconfiguredProps_(comp, data.props_, comp.getInitialConfig());
 
 		data.state_ = new State({}, comp.state, comp);
 		data.state_.setEventData({
 			type: 'state'
 		});
-		data.state_.configState(ctor.STATE_MERGED);
+		data.state_.configState(State.getStateStatic(ctor));
 	},
 
 	/**

packages/metal-state/src/State.js

@@ -2,11 +2,11 @@
 
 import {
 	async,
+	getStaticProperty,
 	isDefAndNotNull,
 	isFunction,
 	isObject,
 	isString,
-	mergeSuperClassesProperty,
 	object
 } from 'metal';
 import { EventEmitter } from 'metal-events';
@@ -271,11 +271,11 @@ class State extends EventEmitter {
 		var ctor = this.constructor;
 		if (ctor !== State) {
 			var defineContext;
-			var merged = State.mergeStateStatic(ctor);
 			if (this.obj_ === this) {
-				defineContext = merged ? ctor.prototype : false;
+				defineContext = ctor.hasConfiguredState_ ? false : ctor.prototype;
+				ctor.hasConfiguredState_ = true;
 			}
-			this.configState(ctor.STATE_MERGED, defineContext);
+			this.configState(State.getStateStatic(ctor), defineContext);
 		}
 	}
 
@@ -375,6 +375,16 @@ class State extends EventEmitter {
 		}
 	}
 
+	/**
+	 * Merges the STATE static variable for the given constructor function.
+	 * @param  {!Function} ctor Constructor function.
+	 * @return {boolean} Returns true if merge happens, false otherwise.
+	 * @static
+	 */
+	static getStateStatic(ctor) {
+		return getStaticProperty(ctor, 'STATE', State.mergeState);
+	}
+
 	/**
 	 * Checks if the value of the state key with the given name has already been
 	 * set. Note that this doesn't run the key's getter.
@@ -448,23 +458,14 @@ class State extends EventEmitter {
 	}
 
 	/**
-	 * Merges an array of values for the STATE property into a single object.
-	 * @param {!Array} values The values to be merged.
+	 * Merges two values for the STATE property into a single object.
+	 * @param {Object} mergedVal
+	 * @param {Object} currVal
 	 * @return {!Object} The merged value.
 	 * @static
 	 */
-	static mergeState(values) {
-		return object.mixin.apply(null, [{}].concat(values.reverse()));
-	}
-
-	/**
-	 * Merges the STATE static variable for the given constructor function.
-	 * @param  {!Function} ctor Constructor function.
-	 * @return {boolean} Returns true if merge happens, false otherwise.
-	 * @static
-	 */
-	static mergeStateStatic(ctor) {
-		return mergeSuperClassesProperty(ctor, 'STATE', State.mergeState);
+	static mergeState(mergedVal, currVal) {
+		return object.mixin({}, currVal, mergedVal);
 	}
 
 	/**

packages/metal-state/test/State.js

@@ -851,7 +851,7 @@ describe('State', function() {
 			assert.strictEqual(undefined, test.key3);
 		});
 
-		it('should merge STATE variable of given constructor', function() {
+		it('should get STATE property value of given constructor', function() {
 			var Test = createTestClass();
 			Test.STATE = {
 				key1: {
@@ -873,7 +873,6 @@ describe('State', function() {
 				}
 			};
 
-			State.mergeStateStatic(ChildTest);
 			assert.deepEqual({
 				key1: {
 					value: -1
@@ -884,7 +883,7 @@ describe('State', function() {
 				key3: {
 					value: 3
 				}
-			}, ChildTest.STATE_MERGED);
+			}, State.getStateStatic(ChildTest));
 		});
 
 		it('should conflict STATE properties from instance with previous instances', function() {