Change frame components prop

src/canvas/model/Canvas.js

@@ -28,7 +28,7 @@ export default Backbone.Model.extend({
     const frame =
       mainPage.getMainFrame() ||
       frames.add({
-        components: em.getWrapper(),
+        component: em.getWrapper(),
         styles: em.getStyle()
       });
     styles.forEach(style => frame.addLink(style));

src/canvas/model/Frame.js

@@ -13,25 +13,25 @@ export default Model.extend({
     width: null,
     height: null,
     head: [],
-    components: '',
+    component: '',
     styles: ''
   }),
 
   initialize(props, opts = {}) {
     const { config } = opts;
     const { em } = config;
-    const { styles, components } = this.attributes;
+    const { styles, component } = this.attributes;
     const domc = em.get('DomComponents');
     const conf = domc.getConfig();
     const allRules = em.get('CssComposer').getAll();
     this.em = em;
     const modOpts = { em, config: conf, frame: this };
 
-    if (!isComponent(components)) {
+    if (!isComponent(component)) {
-      const wrp = isObject(components) ? components : { components };
+      const wrp = isObject(component) ? component : { components: component };
-      wrp.type = 'wrapper';
+      !wrp.type && (wrp.type = 'wrapper');
       const Wrapper = domc.getType('wrapper').model;
-      this.set('components', new Wrapper(wrp, modOpts));
+      this.set('component', new Wrapper(wrp, modOpts));
     }
 
     if (!styles) {
@@ -46,7 +46,7 @@ export default Model.extend({
   },
 
   getComponent() {
-    return this.get('components');
+    return this.get('component');
   },
 
   getStyles() {

test/specs/pages/index.js

@@ -95,7 +95,7 @@ describe('Pages', () => {
           id: idPage1,
           frames: [
             {
-              components: [comp1],
+              component: [comp1],
               styles: `#${idComp1} { color: red }`
             }
           ]
@@ -104,7 +104,7 @@ describe('Pages', () => {
           id: 'page-2',
           frames: [
             {
-              components: [comp2],
+              component: [comp2],
               styles: `#${idComp2} { color: blue }`
             }
           ]
@@ -113,7 +113,7 @@ describe('Pages', () => {
           id: 'page-3',
           frames: [
             {
-              components: '<div id="comp3">Component 3</div>',
+              component: '<div id="comp3">Component 3</div>',
               styles: `#comp3 { color: green }`
             }
           ]