Merge dev

src/dom_components/model/Component.js

@@ -954,25 +954,12 @@ const Component = Backbone.Model.extend(Styleable).extend(
      * @private
      */
     normalizeClasses(arr) {
-      var res = [];
-      const em = this.em;
-
-      if (!em) return;
-
-      var clm = em.get('SelectorManager');
+      const res = [];
+      const { em } = this;
+      const clm = em && em.get('SelectorManager');
       if (!clm) return;
-
       if (arr.models) return [...arr.models];
-
-      arr.forEach(val => {
-        var name = '';
-
-        if (typeof val === 'string') name = val;
-        else name = val.name;
-
-        var model = clm.add(name);
-        res.push(model);
-      });
+      arr.forEach(val => res.push(clm.add(val)));
       return res;
     },
 
@@ -1167,6 +1154,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       delete obj.attributes.class;
       delete obj.toolbar;
       delete obj.traits;
+      delete obj.status;
 
       if (!opts.keepSymbols) {
         if (obj.__symbol) {
@@ -1192,7 +1180,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const defaults = result(this, 'defaults');
 
       forEach(defaults, (value, key) => {
-        if (['type', 'content'].indexOf(key) === -1 && obj[key] === value) {
+        if (['type'].indexOf(key) === -1 && obj[key] === value) {
           delete obj[key];
         }
       });

src/selector_manager/model/Selector.js

@@ -1,9 +1,11 @@
 import Backbone from 'backbone';
+import { result, forEach, keys } from 'underscore';
 
 const TYPE_CLASS = 1;
 const TYPE_ID = 2;
+const { Model } = Backbone;
 
-const Selector = Backbone.Model.extend(
+const Selector = Model.extend(
   {
     idAttribute: 'name',
 
@@ -43,6 +45,7 @@ const Selector = Backbone.Model.extend(
         ? escapeName(namePreEsc)
         : Selector.escapeName(namePreEsc);
       this.set('name', nameEsc);
+      this.em = config.em;
     },
 
     /**
@@ -64,6 +67,36 @@ const Selector = Backbone.Model.extend(
       }
 
       return init + (escape ? escape(name) : name);
+    },
+
+    toJSON(opts = {}) {
+      const { em } = this;
+      let obj = Model.prototype.toJSON.call(this, [opts]);
+      const defaults = result(this, 'defaults');
+
+      if (em && em.getConfig('avoidDefaults')) {
+        forEach(defaults, (value, key) => {
+          if (obj[key] === value) {
+            delete obj[key];
+          }
+        });
+
+        if (obj.label === obj.name) {
+          delete obj.label;
+        }
+
+        const objLen = keys(obj).length;
+
+        if (objLen === 1 && obj.name) {
+          obj = obj.name;
+        }
+
+        if (objLen === 2 && obj.name && obj.type) {
+          obj = this.getFullName();
+        }
+      }
+
+      return obj;
     }
   },
   {

test/specs/css_composer/e2e/CssComposer.js

@@ -128,16 +128,7 @@ describe('E2E tests', () => {
     // ruleOut is a Model
     ruleOut = JSON.parse(JSON.stringify(ruleOut));
     var ruleResult = {
-      selectors: [
-        {
-          active: true,
-          label: 'test1',
-          name: 'test1',
-          type: clsm.Selector.TYPE_CLASS,
-          private: false,
-          protected: false
-        }
-      ],
+      selectors: ['test1'],
       style: {
         color: 'red',
         width: '10px'

test/specs/dom_components/model/Component.js

@@ -274,9 +274,9 @@ describe('Component', () => {
   });
 
   test('setAttributes overwrites correctly', () => {
-    obj.setAttributes({ id: 'test', 'data-test': 'value', a: 'b' });
-    obj.setAttributes({ 'data-test': 'value2' });
-    expect(obj.getAttributes()).toEqual({ 'data-test': 'value2' });
+    obj.setAttributes({ id: 'test', 'data-test': 'value', a: 'b', b: 'c' });
+    obj.setAttributes({ id: 'test2', 'data-test': 'value2' });
+    expect(obj.getAttributes()).toEqual({ id: 'test2', 'data-test': 'value2' });
   });
 
   test('append() returns always an array', () => {

test/specs/selector_manager/e2e/ClassManager.js

@@ -1,3 +1,4 @@
+import Selector from 'selector_manager/model/Selector';
 import Selectors from 'selector_manager/model/Selectors';
 import ClassTagsView from 'selector_manager/view/ClassTagsView';
 
@@ -117,5 +118,42 @@ describe('E2E tests', () => {
       tagEl.addNewTag('test2');
       expect(spy.called).toEqual(true);
     });
+
+    test('Selectors are properly transformed to JSON', () => {
+      const model = components.add({
+        classes: [
+          'test1',
+          '.test1a',
+          '#test2',
+          { name: 'test3', label: 'test3' },
+          { name: 'test4', label: 'test4a' },
+          { name: 'test5' },
+          { name: 'test6', type: Selector.TYPE_CLASS },
+          { name: 'test7', type: Selector.TYPE_ID },
+          { name: 'test8', type: Selector.TYPE_CLASS, protected: 1 },
+          { name: 'test9', type: Selector.TYPE_ID, protected: 1 },
+          { label: 'test10' },
+          { label: 'test11', type: Selector.TYPE_ID },
+          { label: 'test12', protected: 1 }
+        ]
+      });
+
+      const modelTr = JSON.parse(JSON.stringify(model));
+      expect(modelTr.classes).toEqual([
+        'test1',
+        'test1a',
+        '#test2',
+        'test3',
+        { name: 'test4', label: 'test4a' },
+        'test5',
+        'test6',
+        '#test7',
+        { name: 'test8', protected: 1 },
+        { name: 'test9', type: Selector.TYPE_ID, protected: 1 },
+        'test10',
+        '#test11',
+        { name: 'test12', protected: 1 }
+      ]);
+    });
   });
 });