optimize component change/initialize events (fixes #2950)

Author: ngokevin

src/core/component.js

@@ -35,19 +35,17 @@ var Component = module.exports.Component = function (el, attrValue, id) {
   this.el = el;
   this.id = id;
   this.attrName = this.name + (id ? '__' + id : '');
+  this.evtDetail = {id: this.id, name: this.name};
   this.initialized = false;
   this.el.components[this.attrName] = this;
+
   // Store component data from previous update call.
   this.oldData = undefined;
+
   // Last value passed to updateProperties.
   this.previousAttrValue = undefined;
-  this.throttledEmitComponentChanged = utils.throttle(function emitComponentChange (oldData) {
-    el.emit('componentchanged', {
-      id: self.id,
-      name: self.name,
-      newData: self.data,
-      oldData: oldData
-    }, false);
+  this.throttledEmitComponentChanged = utils.throttle(function emitChange () {
+    el.emit('componentchanged', self.evtDetail, false);
   }, 200);
   this.updateProperties(attrValue);
 };
@@ -145,17 +143,6 @@ Component.prototype = {
     return styleParser.stringify(data);
   },
 
-  /**
-   * Returns a copy of data such that we don't expose the private this.data.
-   *
-   * @returns {object} data
-   */
-  getData: function () {
-    var data = this.data;
-    if (typeof data !== 'object') { return data; }
-    return utils.extend({}, data);
-  },
-
   /**
    * Update the cache of the pre-parsed attribute value.
    *
@@ -272,20 +259,15 @@ Component.prototype = {
       this.update(oldData);
       // Play the component if the entity is playing.
       if (el.isPlaying) { this.play(); }
-      el.emit('componentinitialized', {
-        id: this.id,
-        name: this.name,
-        data: this.getData()
-      }, false);
+      el.emit('componentinitialized', this.evtDetail, false);
     } else {
       // Don't update if properties haven't changed
       if (utils.deepEqual(this.oldData, this.data)) { return; }
      // Store current data as previous data for future updates.
       this.oldData = extendProperties({}, this.data, isSinglePropSchema);
       // Update component.
       this.update(oldData);
-      // Limit event to fire once every 200ms.
-      this.throttledEmitComponentChanged(oldData);
+      this.throttledEmitComponentChanged();
     }
   },
 

tests/core/component.test.js

@@ -198,9 +198,8 @@ suite('Component', function () {
       el.setAttribute('material', 'color: red');
       el.addEventListener('componentchanged', function (evt) {
         if (evt.detail.name !== 'material') { return; }
-        assert.equal(evt.detail.oldData.color, 'red');
-        assert.equal(evt.detail.newData.color, 'blue');
         assert.equal(evt.detail.name, 'material');
+        assert.equal(el.getAttribute('material').color, 'blue');
         assert.ok('id' in evt.detail);
         done();
       });
@@ -213,8 +212,7 @@ suite('Component', function () {
       el.setAttribute('position', {x: 0, y: 0, z: 0});
       el.addEventListener('componentchanged', function (evt) {
         if (evt.detail.name !== 'position') { return; }
-        assert.shallowDeepEqual(evt.detail.oldData, {x: 0, y: 0, z: 0});
-        assert.shallowDeepEqual(evt.detail.newData, {x: 1, y: 2, z: 3});
+        assert.shallowDeepEqual(el.getAttribute('position'), {x: 1, y: 2, z: 3});
         assert.equal(evt.detail.name, 'position');
         assert.ok('id' in evt.detail);
         done();
@@ -227,8 +225,7 @@ suite('Component', function () {
     test('emits componentchanged for value', function (done) {
       el.addEventListener('componentchanged', function (evt) {
         if (evt.detail.name !== 'visible') { return; }
-        assert.shallowDeepEqual(evt.detail.oldData, true);
-        assert.shallowDeepEqual(evt.detail.newData, false);
+        assert.equal(el.getAttribute('visible'), false);
         assert.equal(evt.detail.name, 'visible');
         done();
       });
@@ -353,7 +350,6 @@ suite('Component', function () {
     test('emits componentinitialized', function (done) {
       el.addEventListener('componentinitialized', function (evt) {
         if (evt.detail.name !== 'material') { return; }
-        assert.ok(evt.detail.data);
         assert.ok('id' in evt.detail);
         assert.equal(evt.detail.name, 'material');
         done();
@@ -652,8 +648,9 @@ suite('Component', function () {
         schema: {color: {default: 'red'}},
         update: function () { this.el.setAttribute('dummy', 'color', 'blue'); }
       });
-      this.el.addEventListener('componentchanged', function (evt) {
-        assert.equal('blue', evt.detail.newData.color);
+      this.el.addEventListener('componentchanged', evt => {
+        assert.equal(evt.detail.name, 'dummy');
+        assert.equal(this.el.getAttribute('dummy').color, 'blue');
         done();
       });
       var component = new TestComponent(this.el);