Rework javascript api to match README

package.json

@@ -2,7 +2,7 @@
   "name": "css-layout",
   "version": "0.0.1",
   "description": "Reimplementation of CSS layout using pure JavaScript",
-  "main": "src/Layout.js",
+  "main": "src/main.js",
   "scripts": {
     "test": "./node_modules/karma/bin/karma start ./karma.conf.js --single-run"
   },

src/Layout-test-utils.js

@@ -99,8 +99,10 @@ var layoutTestUtils = (function() {
     getIframe();
   }
 
-  if (typeof computeLayout === 'function') {
-    var realComputeLayout = computeLayout;
+  if (typeof computeLayout === 'object') {
+    var fillNodes = computeLayout.fillNodes;
+    var extractNodes = computeLayout.extractNodes;
+    var realComputeLayout = computeLayout.computeLayout;
   }
 
   function roundLayout(layout) {
@@ -142,34 +144,6 @@ var layoutTestUtils = (function() {
   }
 
   function computeCSSLayout(rootNode) {
-    function fillNodes(node) {
-      node.layout = {
-        width: undefined,
-        height: undefined,
-        top: 0,
-        left: 0
-      };
-      if (!node.style) {
-        node.style = {};
-      }
-
-      if (!node.children || node.style.measure) {
-        node.children = [];
-      }
-      node.children.forEach(fillNodes);
-    }
-
-    function extractNodes(node) {
-      var layout = node.layout;
-      delete node.layout;
-      if (node.children.length > 0) {
-        layout.children = node.children.map(extractNodes);
-      } else {
-        delete node.children;
-      }
-      return layout;
-    }
-
     fillNodes(rootNode);
     realComputeLayout(rootNode);
     return roundLayout(extractNodes(rootNode));
@@ -256,6 +230,14 @@ var layoutTestUtils = (function() {
     return namedLayout;
   }
 
+  function testFillNodes(node, filledNode) {
+    expect(fillNodes(node)).toEqual(filledNode);
+  }
+
+  function testExtractNodes(node, extractedNode) {
+    expect(extractNodes(node)).toEqual(extractedNode);
+  }
+
   function testNamedLayout(name, layoutA, layoutB) {
     expect(nameLayout(name, layoutA))
       .toEqual(nameLayout(name, layoutB));
@@ -400,6 +382,8 @@ var layoutTestUtils = (function() {
       testNamedLayout('expected-dom', expectedLayout, domLayout);
       testNamedLayout('layout-dom', layout, domLayout);
     },
+    testFillNodes: testFillNodes,
+    testExtractNodes: testExtractNodes,
     testRandomLayout: function(node, i) {
       expect({node: node, layout: computeCSSLayout(node)})
         .toEqual({node: node, layout: computeDOMLayout(node)});

src/Layout.js

@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
+
 var computeLayout = (function() {
   function capitalizeFirst(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
@@ -25,6 +26,34 @@ var computeLayout = (function() {
 
     return 0;
   }
+  function fillNodes(node) {
+    node.layout = {
+      width: undefined,
+      height: undefined,
+      top: 0,
+      left: 0
+    };
+    if (!node.style) {
+      node.style = {};
+    }
+
+    if (!node.children || node.style.measure) {
+      node.children = [];
+    }
+    node.children.forEach(fillNodes);
+    return node;
+  }
+
+  function extractNodes(node) {
+    var layout = node.layout;
+    delete node.layout;
+    if (node.children && node.children.length > 0) {
+      layout.children = node.children.map(extractNodes);
+    } else {
+      delete node.children;
+    }
+    return layout;
+  }
 
   function getPositiveSpacing(node, type, suffix, location) {
     var key = type + capitalizeFirst(location) + suffix;
@@ -188,26 +217,7 @@ var computeLayout = (function() {
     return b;
   }
 
-  var CSS_UNDEFINED = undefined;
-
-  var CSS_FLEX_DIRECTION_ROW = 'row';
-  var CSS_FLEX_DIRECTION_COLUMN = 'column';
-
-  var CSS_JUSTIFY_FLEX_START = 'flex-start';
-  var CSS_JUSTIFY_CENTER = 'center';
-  var CSS_JUSTIFY_FLEX_END = 'flex-end';
-  var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
-  var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
-
-  var CSS_ALIGN_FLEX_START = 'flex-start';
-  var CSS_ALIGN_CENTER = 'center';
-  var CSS_ALIGN_FLEX_END = 'flex-end';
-  var CSS_ALIGN_STRETCH = 'stretch';
-
-  var CSS_POSITION_RELATIVE = 'relative';
-  var CSS_POSITION_ABSOLUTE = 'absolute';
-
-  return function layoutNode(node, parentMaxWidth) {
+  function layoutNode(node, parentMaxWidth) {
     var/*css_flex_direction_t*/ mainAxis = getFlexDirection(node);
     var/*css_flex_direction_t*/ crossAxis = mainAxis === CSS_FLEX_DIRECTION_ROW ?
       CSS_FLEX_DIRECTION_COLUMN :
@@ -649,7 +659,32 @@ var computeLayout = (function() {
         }
       }
     }
-  };
+  }
+
+  var CSS_UNDEFINED = undefined;
+
+  var CSS_FLEX_DIRECTION_ROW = 'row';
+  var CSS_FLEX_DIRECTION_COLUMN = 'column';
+
+  var CSS_JUSTIFY_FLEX_START = 'flex-start';
+  var CSS_JUSTIFY_CENTER = 'center';
+  var CSS_JUSTIFY_FLEX_END = 'flex-end';
+  var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
+  var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
+
+  var CSS_ALIGN_FLEX_START = 'flex-start';
+  var CSS_ALIGN_CENTER = 'center';
+  var CSS_ALIGN_FLEX_END = 'flex-end';
+  var CSS_ALIGN_STRETCH = 'stretch';
+
+  var CSS_POSITION_RELATIVE = 'relative';
+  var CSS_POSITION_ABSOLUTE = 'absolute';
+
+  return {
+    computeLayout: layoutNode,
+    fillNodes: fillNodes,
+    extractNodes: extractNodes
+  }
 })();
 
 // UMD (Universal Module Definition)

src/__tests__/Layout-test.js

@@ -9,10 +9,46 @@
 /* globals layoutTestUtils */
 
 var testLayout = layoutTestUtils.testLayout;
+var testFillNodes = layoutTestUtils.testFillNodes;
+var testExtractNodes = layoutTestUtils.testExtractNodes;
 var text = layoutTestUtils.text;
 var texts = layoutTestUtils.texts;
 var textSizes = layoutTestUtils.textSizes;
 
+describe('Javascript Only', function() {
+  it('should fill root node with layout, style, and children', function() {
+    testFillNodes(
+      {},
+      {layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
+    )
+  })
+  it('should fill root and child node with layout, style, and children', function() {
+    testFillNodes(
+      {children: [{}]},
+      {layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: [
+        {layout: {width: undefined, height: undefined, top: 0, left: 0}, style: {}, children: []}
+      ]}
+    )
+  })
+  it('should pull out just the layout object from root', function() {
+    testExtractNodes(
+      {layout: {width: undefined, height: undefined, top: 0, left: 0}},
+      {width: undefined, height: undefined, top: 0, left: 0}
+    )
+  })
+  it('should pull out just the layout object from root and children', function() {
+    testExtractNodes(
+      {layout: {width: undefined, height: undefined, top: 0, left: 0}, children: [
+        {layout: {width: undefined, height: undefined, top: 0, left: 0}}
+      ]},
+      {width: undefined, height: undefined, top: 0, left: 0, children: [
+        {width: undefined, height: undefined, top: 0, left: 0}
+      ]}
+    )
+  })
+
+});
+
 describe('Layout', function() {
   it('should layout a single node with width and height', function() {
     testLayout({

src/main.js

@@ -0,0 +1,24 @@
+// UMD (Universal Module Definition)
+// See https://github.com/umdjs/umd for reference
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory();
+  } else {
+    // Browser globals (root is window)
+    root.returnExports = factory();
+  }
+}(this, function () {
+    var layout = require('./Layout.js');
+    return function(node) {
+      node = layout.fillNodes(node);
+      layout.computeLayout(node);
+      node = layout.extractNodes(node);
+      return node;
+  }
+}));

src/transpile.js

@@ -8,7 +8,8 @@
  */
 
 var layoutTestUtils = require('./Layout-test-utils.js');
-var computeLayout = require('./Layout.js');
+var computeLayout = require('./Layout.js').computeLayout;
+var fillNodes = require('./Layout.js').fillNodes;
 var fs = require('fs');
 var JavaTranspiler = require('./JavaTranspiler.js');
 
@@ -30,7 +31,11 @@ global.layoutTestUtils = {
   textSizes: layoutTestUtils.textSizes
 };
 
-global.describe = function(name, cb) { cb(); };
+global.describe = function(name, cb) {
+  if(name == 'Layout') {
+    cb();
+  }
+};
 global.it = function(name, cb) { currentTest = name; cb(); };
 global.xit = function() { /* ignore skipped tests */ };