Always recover serialized symbols

src/dom_components/model/Component.js

@@ -628,20 +628,45 @@ const Component = Backbone.Model.extend(Styleable).extend(
       );
     },
 
+    __getAllById() {
+      const { em } = this;
+      return em ? em.get('DomComponents').allById() : {};
+    },
+
     __getSymbol() {
-      return this.get(keySymbol);
+      let symb = this.get(keySymbol);
+      if (symb && isString(symb)) {
+        const ref = this.__getAllById()[symb];
+        if (ref) {
+          symb = ref;
+          this.set(keySymbol, ref);
+        } else {
+          symb = 0;
+        }
+      }
+      return symb;
     },
 
     __getSymbols() {
-      return this.get(keySymbols);
+      let symbs = this.get(keySymbols);
+      if (symbs && isArray(symbs)) {
+        symbs.forEach((symb, idx) => {
+          if (symb && isString(symb)) {
+            symbs[idx] = this.__getAllById()[symb];
+          }
+        });
+        symbs = symbs.filter(symb => symb && !isString(symb));
+      }
+      return symbs;
     },
 
     __getSymbToUp(opts = {}) {
       const { em } = this;
       const symbEnabled = em && em.get('symbols');
       const { fromInstance } = opts;
-      const symbols = this.get(keySymbols) || [];
+      const symbols = this.__getSymbols() || [];
       const symbol = this.__getSymbol();
+      !symbols.filter && console.log('!symbols.filter', symbols);
       let result =
         symbol && !fromInstance
           ? [symbol]

test/specs/dom_components/model/Symbols.js

@@ -98,6 +98,28 @@ describe('Symbols', () => {
     expect(jsonSymb[keySymbols]).toEqual([idComp]);
   });
 
+  test('Serialized symbol references are always recovered', () => {
+    const comp = wrapper.append(simpleComp)[0];
+    const symbol = createSymbol(comp);
+    const idComp = comp.getId();
+    const idSymb = symbol.getId();
+    // Serialize symbols
+    comp.set(keySymbol, idSymb);
+    symbol.set(keySymbols, [idComp]);
+    // Check updates from instance
+    const newAttr = { class: 'test', myattr: 'myvalue' };
+    comp.setAttributes(newAttr);
+    comp.components('New text content');
+    expect(symbol.getAttributes()).toEqual(newAttr);
+    expect(symbol.toHTML()).toBe(comp.toHTML());
+    // Check updates from symbol
+    const newAttr2 = { class: 'test2', myattr2: 'myvalue2' };
+    symbol.setAttributes(newAttr2);
+    symbol.components('New text content2');
+    expect(comp.getAttributes()).toEqual(newAttr2);
+    expect(symbol.toHTML()).toBe(comp.toHTML());
+  });
+
   test("Removing one instance doesn't affect others", () => {
     const comp = wrapper.append(simpleComp)[0];
     const symbol = createSymbol(comp);