Support creating frames from pages

src/pages/index.js

@@ -100,7 +100,6 @@ export default () => {
     add(props, opts = {}) {
       const { em } = this;
       props.id = props.id || this._createId();
-      props.frames = props.frames || [{}];
       const add = () => {
         const page = this.pages.add(props, opts);
         opts.select && this.select(page);

src/pages/model/Page.js

@@ -10,8 +10,15 @@ export default Model.extend({
   initialize(props, opts = {}) {
     const { config = {} } = opts;
     const { em } = config;
+    const defFrame = {};
     this.em = em;
-    const frames = new Frames(this.get('frames'), config);
+    if (!props.frames) {
+      defFrame.component = props.component;
+      defFrame.styles = props.styles;
+      ['component', 'styles'].map(i => this.unset(i));
+    }
+    const frms = props.frames || [defFrame];
+    const frames = new Frames(frms, config);
     this.set('frames', frames);
     const um = em && em.get('UndoManager');
     um && um.add(frames);

test/specs/pages/index.js

@@ -93,12 +93,8 @@ describe('Pages', () => {
       initPages = [
         {
           id: idPage1,
-          frames: [
-            {
-              component: [comp1],
-              styles: `#${idComp1} { color: red }`
-            }
-          ]
+          component: [comp1],
+          styles: `#${idComp1} { color: red }`
         },
         {
           id: 'page-2',