have setAttribute wait for existing DOM data to init component (#2727)

Author: ngokevin

src/core/a-entity.js

@@ -510,14 +510,15 @@ var proto = Object.create(ANode.prototype, {
    * When initializing, we set the component on `this.components`.
    *
    * @param {string} attr - Component name.
-   * @param {object} attrValue - The value of the DOM attribute.
-   * @param {bollean} clobber - if the new attrValue will ccompletely replace the previous properties
+   * @param {object} attrValue - Value of the DOM attribute.
+   * @param {boolean} clobber - If new attrValue completely replaces previous properties.
    */
   updateComponent: {
     value: function (attr, attrValue, clobber) {
       var component = this.components[attr];
       var isDefault = attr in this.defaultComponents;
       if (component) {
+        // Remove component.
         if (attrValue === null && !isDefault) {
           this.removeComponent(attr);
           return;
@@ -526,6 +527,7 @@ var proto = Object.create(ANode.prototype, {
         component.updateProperties(attrValue, clobber);
         return;
       }
+
       // Component not yet initialized. Initialize component.
       this.initComponent(attr, attrValue, false);
     }
@@ -686,28 +688,37 @@ var proto = Object.create(ANode.prototype, {
       var arg1Type = typeof arg1;
       var clobber;
       var componentName;
+      var delimiterIndex;
       var isDebugMode;
 
-      var pos = attrName.indexOf(MULTIPLE_COMPONENT_DELIMITER);
-      componentName = pos > 0 ? attrName.substring(0, pos) : attrName;
-
-      // Determine which type of setAttribute to call based on the types of the arguments.
-      if (COMPONENTS[componentName]) {
-        if (arg1Type === 'string' && typeof arg2 !== 'undefined') {
-          singlePropertyUpdate(this, attrName, arg1, arg2);
-        } else {
-          clobber = arg1Type !== 'object' || (arg1Type === 'object' && arg2 === true);
-          this.updateComponent(attrName, arg1, clobber);
-        }
+      delimiterIndex = attrName.indexOf(MULTIPLE_COMPONENT_DELIMITER);
+      componentName = delimiterIndex > 0 ? attrName.substring(0, delimiterIndex) : attrName;
 
-        // In debug mode, write component data up to the DOM.
-        isDebugMode = this.sceneEl && this.sceneEl.getAttribute('debug');
-        if (isDebugMode) { this.components[attrName].flushToDOM(); }
+      // Not a component.
+      if (!COMPONENTS[componentName]) {
+        normalSetAttribute(this, attrName, arg1);
         return;
+      }
+
+      // Initialize component first if not yet initialized.
+      if (!this.components[attrName] && this.hasAttribute(attrName)) {
+        this.updateComponent(attrName,
+                             HTMLElement.prototype.getAttribute.call(this, attrName));
+      }
+
+      // Determine which type of setAttribute to call based on the types of the arguments.
+      if (arg1Type === 'string' && typeof arg2 !== 'undefined') {
+        singlePropertyUpdate(this, attrName, arg1, arg2);
       } else {
-        normalSetAttribute(this, attrName, arg1);
+        // Object update.
+        clobber = arg1Type !== 'object' || (arg1Type === 'object' && arg2 === true);
+        this.updateComponent(attrName, arg1, clobber);
       }
 
+      // In debug mode, write component data up to the DOM.
+      isDebugMode = this.sceneEl && this.sceneEl.getAttribute('debug');
+      if (isDebugMode) { this.components[attrName].flushToDOM(); }
+
       /**
        * Just update one of the component properties.
        * >> setAttribute('foo', 'bar', 'baz')

tests/core/a-entity.test.js

@@ -1048,6 +1048,51 @@ suite('a-entity', function () {
       assert.ok(el.components.sound__1 instanceof components.sound.Component);
       assert.ok(el.components.sound__2 instanceof components.sound.Component);
     });
+
+    test('waits for DOM data to init before setAttribute data', function (done) {
+      // Test component.
+      AFRAME.registerComponent('test', {
+        schema: {
+          foo: {default: 5},
+          bar: {default: 'red'},
+          qux: {default: true}
+        },
+
+        init: function () {
+          var data = this.data;
+          assert.equal(data.foo, 10);
+          assert.equal(data.bar, 'red');
+          assert.equal(data.qux, true);
+        },
+
+        update: function (oldData) {
+          var data = this.data;
+          if (Object.keys(oldData).length) {
+            // Second update via setAttribute.
+            assert.equal(data.foo, 10);
+            assert.equal(data.bar, 'orange');
+            assert.equal(data.qux, true);
+            delete AFRAME.components['test-setter'];
+            done();
+          } else {
+            // First update via initialization.
+            assert.equal(data.foo, 10);
+            assert.equal(data.bar, 'red');
+            assert.equal(data.qux, true);
+          }
+        }
+      });
+
+      // Component that will do the setAttribute, without dependency.
+      AFRAME.registerComponent('test-setter', {
+        init: function () {
+          this.el.setAttribute('test', {bar: 'orange'});
+        }
+      });
+
+      // Create the entity.
+      this.el.innerHTML = '<a-entity test-setter test="foo: 10">';
+    });
   });
 
   suite('removeComponent', function () {