redesigning new API

lib/src/commands/Examples.js

-const passProps = {
-  strProp: 'string prop',
-  numProp: 12345,
-  objProp: { inner: { foo: 'bar' } },
-  fnProp: () => 'Hello from a function'
-};
-
-const topBarOptions = {
-  topBar: {
-    title: 'Hello1'
-  }
-};
-
-const singleComponent = {
-  component: {
-    name: 'MyReactComponent'
-  }
-};
-
-const stackOfComponentsWithTopBar = {
-  stack: [
-    {
-      component: {
-        name: 'MyReactComponent1'
-      }
-    },
-
-    {
-      component: {
-        name: 'MyReactComponent2',
-        options: topBarOptions // optional
-      }
-    }
-  ]
-};
-
-const bottomTabs = {
-  bottomTabs: [
-    stackOfComponentsWithTopBar,
-    stackOfComponentsWithTopBar,
-    {
-      component: {
-        name: 'MyReactComponent1'
-      }
-    }
-  ]
-};
-
-const sideMenu = {
-  sideMenu: {
-    left: singleComponent,
-    center: stackOfComponentsWithTopBar,
-    right: singleComponent
-  }
-};
-
-const topTabs = {
-  topTabs: [
-    singleComponent,
-    singleComponent,
-    singleComponent,
-    singleComponent,
-    stackOfComponentsWithTopBar
-  ]
-};
-
-const complexLayout = {
-  sideMenu: {
-    left: singleComponent,
-    center: {
-      bottomTabs: [
-        stackOfComponentsWithTopBar,
-        stackOfComponentsWithTopBar,
-        {
-          stack: [
-            {
-              topTabs: [
-                stackOfComponentsWithTopBar,
-                stackOfComponentsWithTopBar,
-                {
-                  topTabs: [
-                    singleComponent,
-                    singleComponent,
-                    singleComponent,
-                    singleComponent,
-                    stackOfComponentsWithTopBar
-                  ],
-                  options: topBarOptions
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  }
-};
-
-module.exports = {
-  passProps,
-  topBarOptions,
-  singleComponent,
-  stackOfComponentsWithTopBar,
-  bottomTabs,
-  sideMenu,
-  topTabs,
-  complexLayout
-};

lib/src/commands/LayoutExamples.js

+const passProps = {
+  strProp: 'string prop',
+  numProp: 12345,
+  objProp: { inner: { foo: 'bar' } },
+  fnProp: () => 'Hello from a function'
+};
+
+const options = {
+  topBar: {
+    title: 'Hello1'
+  }
+};
+
+const singleComponent = {
+  component: {
+    name: 'MyReactComponent',
+    options,
+    passProps
+  }
+};
+
+const stackWithTopBar = {
+  stack: {
+    children: [
+      {
+        component: {
+          name: 'MyReactComponent1'
+        }
+      },
+      {
+        component: {
+          name: 'MyReactComponent2',
+          options
+        }
+      }
+    ],
+    options
+  }
+};
+
+const bottomTabs = {
+  bottomTabs: {
+    children: [
+      stackWithTopBar,
+      stackWithTopBar,
+      {
+        component: {
+          name: 'MyReactComponent1'
+        }
+      }
+    ]
+  }
+};
+
+const sideMenu = {
+  sideMenu: {
+    left: singleComponent,
+    center: stackWithTopBar,
+    right: singleComponent
+  }
+};
+
+const topTabs = {
+  topTabs: {
+    children: [
+      singleComponent,
+      singleComponent,
+      singleComponent,
+      singleComponent,
+      stackWithTopBar
+    ],
+    options
+  }
+};
+
+const complexLayout = {
+  sideMenu: {
+    left: singleComponent,
+    center: {
+      bottomTabs: {
+        children: [
+          stackWithTopBar,
+          stackWithTopBar,
+          {
+            stack: {
+              children: [
+                {
+                  topTabs: {
+                    children: [
+                      stackWithTopBar,
+                      stackWithTopBar,
+                      {
+                        topTabs: {
+                          options,
+                          children: [
+                            singleComponent,
+                            singleComponent,
+                            singleComponent,
+                            singleComponent,
+                            stackWithTopBar
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  }
+};
+
+module.exports = {
+  passProps,
+  options,
+  singleComponent,
+  stackWithTopBar,
+  bottomTabs,
+  sideMenu,
+  topTabs,
+  complexLayout
+};

lib/src/commands/LayoutTreeParser.js

   _topTabs(api) {
     return {
       type: LayoutTypes.TopTabs,
-      data: {},
-      children: _.map(api, this.parse)
+      data: { options: api.options },
+      children: _.map(api.children, this.parse)
     };
   }
 
   _sideMenu(api) {
     return {
       type: LayoutTypes.SideMenuRoot,
-      data: {},
+      data: { options: api.options },
       children: this._sideMenuChildren(api)
     };
   }
   _bottomTabs(api) {
     return {
       type: LayoutTypes.BottomTabs,
-      data: {},
-      children: _.map(api, this.parse)
+      data: { options: api.options },
+      children: _.map(api.children, this.parse)
     };
   }
 
   _stack(api) {
     return {
-      type: LayoutTypes.ComponentStack,
-      data: {},
-      children: _.map(api, this.parse)
+      type: LayoutTypes.Stack,
+      data: { name: api.name, options: api.options },
+      children: _.map(api.children, this.parse)
     };
   }
 
   _component(api) {
-    return { 
+    return {
       type: LayoutTypes.Component,
-      data: api,
+      data: { name: api.name, options: api.options, passProps: api.passProps },
       children: []
     };
   }

lib/src/commands/LayoutTreeParser.test.js

 const LayoutTreeParser = require('./LayoutTreeParser');
-const Examples = require('./Examples');
 const LayoutTypes = require('./LayoutTypes');
 const _ = require('lodash');
+const Examples = require('./LayoutExamples');
 
 describe('LayoutTreeParser', () => {
   let uut;
     it('single component', () => {
       expect(uut.parse(Examples.singleComponent)).toEqual({
         type: LayoutTypes.Component,
-        data: { name: 'MyReactComponent' },
+        data: { name: 'MyReactComponent', options: Examples.options, passProps: Examples.passProps },
         children: []
       });
     });
     });
 
     it('stack of components with top bar', () => {
-      expect(uut.parse(Examples.stackOfComponentsWithTopBar)).toEqual({
-        type: LayoutTypes.ComponentStack,
-        data: {},
+      expect(uut.parse(Examples.stackWithTopBar)).toEqual({
+        type: LayoutTypes.Stack,
+        data: {
+          options: Examples.options
+        },
         children: [
           {
             type: LayoutTypes.Component,
           },
           {
             type: LayoutTypes.Component,
-            data: { name: 'MyReactComponent2', options: Examples.topBarOptions },
+            data: { name: 'MyReactComponent2', options: Examples.options },
             children: []
           }
         ]
       expect(result.type).toEqual(LayoutTypes.BottomTabs);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
-      expect(result.children[0].type).toEqual(LayoutTypes.ComponentStack);
-      expect(result.children[1].type).toEqual(LayoutTypes.ComponentStack);
+      expect(result.children[0].type).toEqual(LayoutTypes.Stack);
+      expect(result.children[1].type).toEqual(LayoutTypes.Stack);
       expect(result.children[2].type).toEqual(LayoutTypes.Component);
     });
 
       expect(result.children[0].children.length).toEqual(1);
       expect(result.children[0].children[0].type).toEqual(LayoutTypes.Component);
       expect(result.children[1].children.length).toEqual(1);
-      expect(result.children[1].children[0].type).toEqual(LayoutTypes.ComponentStack);
+      expect(result.children[1].children[0].type).toEqual(LayoutTypes.Stack);
       expect(result.children[2].children.length).toEqual(1);
       expect(result.children[2].children[0].type).toEqual(LayoutTypes.Component);
     });
       const result = uut.parse(Examples.topTabs);
       expect(_.keys(result)).toEqual(['type', 'data', 'children']);
       expect(result.type).toEqual(LayoutTypes.TopTabs);
-      expect(result.data).toEqual({});
+      expect(result.data).toEqual({ options: Examples.options });
       expect(result.children.length).toEqual(5);
       expect(result.children[0].type).toEqual(LayoutTypes.Component);
       expect(result.children[1].type).toEqual(LayoutTypes.Component);
       expect(result.children[2].type).toEqual(LayoutTypes.Component);
       expect(result.children[3].type).toEqual(LayoutTypes.Component);
-      expect(result.children[4].type).toEqual(LayoutTypes.ComponentStack);
+      expect(result.children[4].type).toEqual(LayoutTypes.Stack);
     });
 
     it('complex layout example', () => {
       expect(result.type).toEqual('SideMenuRoot');
       expect(result.children[1].type).toEqual('SideMenuCenter');
       expect(result.children[1].children[0].type).toEqual('BottomTabs');
-      expect(result.children[1].children[0].children[2].type).toEqual('ComponentStack');
+      expect(result.children[1].children[0].children[2].type).toEqual('Stack');
       expect(result.children[1].children[0].children[2].children[0].type).toEqual('TopTabs');
       expect(result.children[1].children[0].children[2].children[0].children[2].type).toEqual('TopTabs');
-      expect(result.children[1].children[0].children[2].children[0].children[2].children[4].type).toEqual('ComponentStack');
-      // expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: {} });
+      expect(result.children[1].children[0].children[2].children[0].children[2].children[4].type).toEqual('Stack');
+      expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: { topBar: { title: 'Hello1' } } });
     });
   });
+
+  it('options for all containing types', () => {
+    const options = {};
+    expect(uut.parse({ component: { options } }).data.options).toBe(options);
+    expect(uut.parse({ stack: { options } }).data.options).toBe(options);
+    expect(uut.parse({ bottomTabs: { options } }).data.options).toBe(options);
+    expect(uut.parse({ topTabs: { options } }).data.options).toBe(options);
+    expect(uut.parse({ sideMenu: { options, center: { component: {} } } }).data.options).toBe(options);
+  });
 });

lib/src/commands/LayoutTypes.js

 module.exports = {
   Component: 'Component',
-  ComponentStack: 'ComponentStack',
+  Stack: 'Stack',
   BottomTabs: 'BottomTabs',
   SideMenuRoot: 'SideMenuRoot',
   SideMenuCenter: 'SideMenuCenter',
   SideMenuLeft: 'SideMenuLeft',
   SideMenuRight: 'SideMenuRight',
-  TopTabs: 'TopTabs',
-  TopTab: 'TopTab'
+  TopTabs: 'TopTabs'
 };