Add getChangedProps method in Component model

src/dom_components/model/Component.js

@@ -1029,31 +1029,41 @@ const Component = Backbone.Model.extend(Styleable).extend(
       delete obj.traits;
 
       if (this.em.getConfig('avoidDefaults')) {
-        const defaults = result(this, 'defaults');
+        this.getChangedProps(obj);
+      }
 
-        forEach(defaults, (value, key) => {
-          if (['type', 'content'].indexOf(key) === -1 && obj[key] === value) {
-            delete obj[key];
-          }
-        });
+      return obj;
+    },
 
-        if (isEmpty(obj.type)) {
-          delete obj.type;
-        }
+    /**
+     * Return an object containing only changed props
+     */
+    getChangedProps(res) {
+      const obj = res || Backbone.Model.prototype.toJSON.apply(this);
+      const defaults = result(this, 'defaults');
 
-        forEach(['attributes', 'style'], prop => {
-          if (isEmpty(defaults[prop]) && isEmpty(obj[prop])) {
-            delete obj[prop];
-          }
-        });
+      forEach(defaults, (value, key) => {
+        if (['type', 'content'].indexOf(key) === -1 && obj[key] === value) {
+          delete obj[key];
+        }
+      });
 
-        forEach(['classes', 'components'], prop => {
-          if (isEmpty(defaults[prop]) && !obj[prop].length) {
-            delete obj[prop];
-          }
-        });
+      if (isEmpty(obj.type)) {
+        delete obj.type;
       }
 
+      forEach(['attributes', 'style'], prop => {
+        if (isEmpty(defaults[prop]) && isEmpty(obj[prop])) {
+          delete obj[prop];
+        }
+      });
+
+      forEach(['classes', 'components'], prop => {
+        if (!obj[prop] || (isEmpty(defaults[prop]) && !obj[prop].length)) {
+          delete obj[prop];
+        }
+      });
+
       return obj;
     },