Serialize and deserialize Symbols

src/dom_components/model/Component.js

@@ -1133,7 +1133,14 @@ const Component = Backbone.Model.extend(Styleable).extend(
       delete obj.attributes.class;
       delete obj.toolbar;
       delete obj.traits;
-      delete obj.__symbol;
+
+      if (obj.__symbol) {
+        if (Array.isArray(obj.__symbol)) {
+          obj.__symbol = this.__getSymbToUp().map(i => i.getId());
+        } else {
+          obj.__symbol = obj.__symbol.getId();
+        }
+      }
 
       if (this.em.getConfig('avoidDefaults')) {
         this.getChangedProps(obj);

src/dom_components/model/Components.js

@@ -6,7 +6,8 @@ import {
   each,
   includes,
   extend,
-  flatten
+  flatten,
+  debounce
 } from 'underscore';
 
 let Component;
@@ -173,8 +174,9 @@ export default Backbone.Collection.extend({
       .filter(i => i)
       .map(model => this.processDef(model));
     models = isMult ? flatten(models, 1) : models[0];
-
-    return Backbone.Collection.prototype.add.apply(this, [models, opt]);
+    const result = Backbone.Collection.prototype.add.apply(this, [models, opt]);
+    this.__firstAdd = result;
+    return result;
   },
 
   /**
@@ -249,5 +251,27 @@ export default Backbone.Collection.extend({
       model.setStyle({});
       model.addClass(name);
     }
-  }
+
+    this.__onAddEnd();
+  },
+
+  __onAddEnd: debounce(function() {
+    const { domc } = this;
+    const allComp = (domc && domc.allById()) || {};
+    const firstAdd = this.__firstAdd;
+    const toCheck = isArray(firstAdd) ? firstAdd : [firstAdd];
+    const onAll = comps => {
+      comps.forEach(comp => {
+        const symbol = comp.get('__symbol');
+        if (symbol && (isString(symbol) || isString(symbol[0]))) {
+          const result = isArray(symbol)
+            ? symbol.map(smb => allComp[smb]).filter(i => i)
+            : allComp[symbol];
+          comp.set('__symbol', result, { silent: true });
+        }
+        onAll(comp.components());
+      });
+    };
+    onAll(toCheck);
+  })
 });