Merge pull request #139 from ColinEberhardt/eslint

Eslint - enforces many more rules.

.eslintrc

@@ -1,6 +1,5 @@
 {
-    "browser": true,
+    "extends": "./node_modules/fbjs-scripts/eslint/.eslintrc",
-    "shadow": true,
     "globals": {
         "jasmine": true,
         "describe": true,
@@ -17,8 +16,5 @@
         "console": true,
         "setTimeout": true,
         "define": true
-    },
-    "rules": {
-        "quotes": [2, "single"]
     }
 }

Gruntfile.js

@@ -1,9 +1,8 @@
 'use strict';
 
 module.exports = function(grunt) {
-  var fs = require('fs');
   var path = require('path');
-  var isWindows = /^win/.test(process.platform);
+  var isWindows = (/^win/).test(process.platform);
 
   require('load-grunt-tasks')(grunt);
 
@@ -26,8 +25,7 @@ module.exports = function(grunt) {
     config.cTestCompile = 'cl -nologo -Zi -Tpsrc/__tests__/Layout-test.c -Tpsrc/Layout.c -Tpsrc/Layout-test-utils.c -link -incremental:no -out:"<%= config.cTestOutput %>"';
     config.cTestExecute = '<%= config.cTestOutput %>';
     config.cTestClean = ['<%= config.cTestOutput %>', '*.obj', '*.pdb'];
-  }
+  } else {
-  else {
     // GCC build (OSX, Linux, ...), assumes gcc is in the path.
     config.cTestOutput = 'c_test';
     config.cTestCompile = 'gcc -std=c99 -Werror -Wno-padded src/__tests__/Layout-test.c src/Layout.c src/Layout-test-utils.c -lm -o "./<%= config.cTestOutput %>"';
@@ -42,8 +40,8 @@ module.exports = function(grunt) {
       dist: {
         options: {
           create: ['<%= config.distFolder %>']
-        },
+        }
-      },
+      }
     },
 
     clean: {
@@ -56,12 +54,12 @@ module.exports = function(grunt) {
       options: {
         configFile: '.eslintrc'
       },
-      target: ['<%= config.srcFolder %>/Layout.js']
+      target: ['<%= config.srcFolder %>/**/*.js', './Gruntfile.js']
     },
 
     includereplace: {
       options: {
-        prefix: '// @@',
+        prefix: '// @@'
       },
       main: {
         src: '<%= config.srcFolder %>/<%= config.libName %>.js',
@@ -120,17 +118,16 @@ module.exports = function(grunt) {
               '#ifdef CSS_LAYOUT_IMPLEMENTATION',
               src,
               '#endif // CSS_LAYOUT_IMPLEMENTATION'
-            ].join('\n')
+            ].join('\n');
-          }
+          } else {
-          else {
             return src;
           }
-        },
+        }
       },
       dist: {
         src: ['<%= config.srcFolder %>/Layout.h', '<%= config.srcFolder %>/Layout.c'],
-        dest: '<%= config.distFolder %>/css-layout.h',
+        dest: '<%= config.distFolder %>/css-layout.h'
-      },
+      }
     },
 
     shell: {
@@ -153,8 +150,8 @@ module.exports = function(grunt) {
 
     watch: {
       files: ['src/Layout.js'],
-      tasks: ['ci'],
+      tasks: ['ci']
-    },
+    }
   });
 
   // Compiles and runs the Java tests

package.json

@@ -24,6 +24,8 @@
   },
   "homepage": "https://github.com/facebook/css-layout",
   "devDependencies": {
+    "babel-eslint": "^4.1.3",
+    "fbjs-scripts": "^0.2.2",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-clean": "^0.6.0",

src/CSharpTranspiler.js

@@ -57,7 +57,7 @@ function __transpileToCSharpCommon(code) {
 
     .replace(/(CSSConstants|CSSWrap|CSSJustify|CSSAlign|CSSPositionType)\.([_A-Z]+)/g,
         function(str, match1, match2) {
-          return match1 + "." + constantToPascalCase(match2);
+          return match1 + '.' + constantToPascalCase(match2);
         });
 }
 
@@ -114,7 +114,7 @@ function __transpileSingleTestToCSharp(code) {
 
     .replace(/(CSSWrap|CSSFlexDirection)\.([_A-Z]+)/g,
         function(str, match1, match2) {
-          return match1 + "." + constantToPascalCase(match2);
+          return match1 + '.' + constantToPascalCase(match2);
         });
 }
 
@@ -162,13 +162,13 @@ var CSharpTranspiler = {
     var allTestsInCSharp = [];
     for (var i = 0; i < allTestsInC.length; i++) {
       allTestsInCSharp[i] =
-          "    [Test]\n" +
+          '    [Test]\n' +
-          "    public void TestCase" + i + "()\n" +
+          '    public void TestCase' + i + '()\n' +
           __transpileSingleTestToCSharp(allTestsInC[i]);
     }
     return allTestsInCSharp.join('\n\n');
   }
-}
+};
 
 if (typeof module !== 'undefined') {
   module.exports = CSharpTranspiler;

src/JavaTranspiler.js

@@ -51,7 +51,7 @@ function __transpileToJavaCommon(code) {
     .replace(/isUndefined\((.+?)\)/g, 'Float.isNaN\($1\)')
     .replace(/\/\*\(c\)!([^*]+)\*\//g, '')
     .replace(/var\/\*\(java\)!([^*]+)\*\//g, '$1')
-    .replace(/\/\*\(java\)!([^*]+)\*\//g, '$1')
+    .replace(/\/\*\(java\)!([^*]+)\*\//g, '$1');
 }
 
 function __transpileSingleTestToJava(code) {

src/Layout-test-utils.js

@@ -24,12 +24,12 @@ var layoutTestUtils = (function() {
 
   if (typeof jasmine !== 'undefined') {
     jasmine.matchersUtil.buildFailureMessage = function() {
-      var args = Array.prototype.slice.call(arguments, 0),
+      var args = Array.prototype.slice.call(arguments, 0);
-        matcherName = args[0],
+      var matcherName = args[0];
-        isNot = args[1],
+      var isNot = args[1];
-        actual = args[2],
+      var actual = args[2];
-        expected = args.slice(3),
+      var expected = args.slice(3);
-        englishyPredicate = matcherName.replace(/[A-Z]/g, function(s) { return ' ' + s.toLowerCase(); });
+      var englishyPredicate = matcherName.replace(/[A-Z]/g, function(s) { return ' ' + s.toLowerCase(); });
 
       var pp = function(node) {
         return jasmine.pp(node)
@@ -278,8 +278,7 @@ var layoutTestUtils = (function() {
       var val = obj[key];
       if (typeof val === 'number') {
         obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) / testMeasurePrecision;
-      }
+      } else if (typeof val === 'object') {
-      else if (typeof val === 'object') {
         inplaceRoundNumbersInObject(val);
       }
     }
@@ -386,7 +385,7 @@ var layoutTestUtils = (function() {
     document.body.appendChild(iframeText);
 
     var body = iframeText.contentDocument.body;
-    if (width === undefined || width !== width) {
+    if (width === undefined || isNaN(width)) {
       width = Infinity;
     }
 
@@ -490,7 +489,7 @@ var layoutTestUtils = (function() {
     reduceTest: reduceTest,
     text: function(text) {
       var fn = function(width) {
-        if (width === undefined || width !== width) {
+        if (width === undefined || isNaN(width)) {
           width = Infinity;
         }
 

src/Layout.c

@@ -989,7 +989,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
         // For a relative children, we're either using alignItems (parent) or
         // alignSelf (child) in order to determine the position in the cross axis
         if (child->style.position_type == CSS_POSITION_RELATIVE) {
+          /*eslint-disable */
+          // This variable is intentionally re-defined as the code is transpiled to a block scope language
           css_align_t alignItem = getAlignItem(node, child);
+          /*eslint-enable */
           if (alignItem == CSS_ALIGN_STRETCH) {
             // You can only stretch if the dimension has not already been set
             // previously.

src/Layout.js

@@ -100,7 +100,7 @@ var computeLayout = (function() {
   }
 
   function getLeadingMargin(node, axis) {
-    if (node.style.marginStart != null && isRowDirection(axis)) {
+    if (node.style.marginStart !== undefined && isRowDirection(axis)) {
       return node.style.marginStart;
     }
 
@@ -112,11 +112,11 @@ var computeLayout = (function() {
       case 'column-reverse': value = node.style.marginBottom; break;
     }
 
-    if (value != null) {
+    if (value !== undefined) {
       return value;
     }
 
-    if (node.style.margin != null) {
+    if (node.style.margin !== undefined) {
       return node.style.margin;
     }
 
@@ -124,7 +124,7 @@ var computeLayout = (function() {
   }
 
   function getTrailingMargin(node, axis) {
-    if (node.style.marginEnd != null && isRowDirection(axis)) {
+    if (node.style.marginEnd !== undefined && isRowDirection(axis)) {
       return node.style.marginEnd;
     }
 
@@ -140,7 +140,7 @@ var computeLayout = (function() {
       return value;
     }
 
-    if (node.style.margin != null) {
+    if (node.style.margin !== undefined) {
       return node.style.margin;
     }
 
@@ -148,7 +148,7 @@ var computeLayout = (function() {
   }
 
   function getLeadingPadding(node, axis) {
-    if (node.style.paddingStart != null && node.style.paddingStart >= 0
+    if (node.style.paddingStart !== undefined && node.style.paddingStart >= 0
         && isRowDirection(axis)) {
       return node.style.paddingStart;
     }
@@ -165,7 +165,7 @@ var computeLayout = (function() {
       return value;
     }
 
-    if (node.style.padding != null && node.style.padding >= 0) {
+    if (node.style.padding !== undefined && node.style.padding >= 0) {
       return node.style.padding;
     }
 
@@ -173,7 +173,7 @@ var computeLayout = (function() {
   }
 
   function getTrailingPadding(node, axis) {
-    if (node.style.paddingEnd != null && node.style.paddingEnd >= 0
+    if (node.style.paddingEnd !== undefined && node.style.paddingEnd >= 0
         && isRowDirection(axis)) {
       return node.style.paddingEnd;
     }
@@ -190,7 +190,7 @@ var computeLayout = (function() {
       return value;
     }
 
-    if (node.style.padding != null && node.style.padding >= 0) {
+    if (node.style.padding !== undefined && node.style.padding >= 0) {
       return node.style.padding;
     }
 
@@ -198,7 +198,7 @@ var computeLayout = (function() {
   }
 
   function getLeadingBorder(node, axis) {
-    if (node.style.borderStartWidth != null && node.style.borderStartWidth >= 0
+    if (node.style.borderStartWidth !== undefined && node.style.borderStartWidth >= 0
         && isRowDirection(axis)) {
       return node.style.borderStartWidth;
     }
@@ -215,7 +215,7 @@ var computeLayout = (function() {
       return value;
     }
 
-    if (node.style.borderWidth != null && node.style.borderWidth >= 0) {
+    if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
       return node.style.borderWidth;
     }
 
@@ -223,7 +223,7 @@ var computeLayout = (function() {
   }
 
   function getTrailingBorder(node, axis) {
-    if (node.style.borderEndWidth != null && node.style.borderEndWidth >= 0 
+    if (node.style.borderEndWidth !== undefined && node.style.borderEndWidth >= 0
         && isRowDirection(axis)) {
       return node.style.borderEndWidth;
     }
@@ -240,7 +240,7 @@ var computeLayout = (function() {
       return value;
     }
 
-    if (node.style.borderWidth != null && node.style.borderWidth >= 0) {
+    if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
       return node.style.borderWidth;
     }
 
@@ -357,19 +357,19 @@ var computeLayout = (function() {
   }
 
   function isDimDefined(node, axis) {
-    return node.style[dim[axis]] != null && node.style[dim[axis]] >= 0;
+    return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0;
   }
 
   function isPosDefined(node, pos) {
-    return node.style[pos] != null;
+    return node.style[pos] !== undefined;
   }
 
   function isMeasureDefined(node) {
-    return node.style.measure != null;
+    return node.style.measure !== undefined;
   }
 
   function getPosition(node, pos) {
-    if (node.style[pos] != null) {
+    if (node.style[pos] !== undefined) {
       return node.style[pos];
     }
     return 0;
@@ -391,10 +391,10 @@ var computeLayout = (function() {
     }[axis];
 
     var boundValue = value;
-    if (max != null && max >= 0 && boundValue > max) {
+    if (max !== undefined && max >= 0 && boundValue > max) {
       boundValue = max;
     }
-    if (min != null && min >= 0 && boundValue < min) {
+    if (min !== undefined && min >= 0 && boundValue < min) {
       boundValue = min;
     }
     return boundValue;
@@ -410,7 +410,7 @@ var computeLayout = (function() {
   // When the user specifically sets a value for width or height
   function setDimensionFromStyle(node, axis) {
     // The parent already computed us a width or height. We just skip it
-    if (node.layout[dim[axis]] != null) {
+    if (node.layout[dim[axis]] !== undefined) {
       return;
     }
     // We only run if there's a width or height defined
@@ -433,7 +433,7 @@ var computeLayout = (function() {
   // If both left and right are defined, then use left. Otherwise return
   // +left or -right depending on which is defined.
   function getRelativePosition(node, axis) {
-    if (node.style[leading[axis]] != null) {
+    if (node.style[leading[axis]] !== undefined) {
       return getPosition(node, leading[axis]);
     }
     return -getPosition(node, trailing[axis]);
@@ -565,8 +565,8 @@ var computeLayout = (function() {
       // immediately stacked in the initial loop will not be touched again
       // in <Loop C>.
       var/*bool*/ isSimpleStackMain =
-          (isMainDimDefined && justifyContent == CSS_JUSTIFY_FLEX_START) ||
+          (isMainDimDefined && justifyContent === CSS_JUSTIFY_FLEX_START) ||
-          (!isMainDimDefined && justifyContent != CSS_JUSTIFY_CENTER);
+          (!isMainDimDefined && justifyContent !== CSS_JUSTIFY_CENTER);
       var/*int*/ firstComplexMain = (isSimpleStackMain ? childCount : startLine);
 
       // Use the initial line loop to position children in the cross axis for
@@ -704,7 +704,7 @@ var computeLayout = (function() {
         // we found a non-trivial child. The remaining children will be laid out
         // in <Loop C>.
         if (isSimpleStackMain &&
-            (getPositionType(child) != CSS_POSITION_RELATIVE || isFlex(child))) {
+            (getPositionType(child) !== CSS_POSITION_RELATIVE || isFlex(child))) {
           isSimpleStackMain = false;
           firstComplexMain = i;
         }
@@ -713,8 +713,8 @@ var computeLayout = (function() {
         // we found a non-trivial child. The remaining children will be laid out
         // in <Loop D>.
         if (isSimpleStackCross &&
-            (getPositionType(child) != CSS_POSITION_RELATIVE ||
+            (getPositionType(child) !== CSS_POSITION_RELATIVE ||
-                (alignItem !== CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
+                (alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) ||
                 isUndefined(child.layout[dim[crossAxis]]))) {
           isSimpleStackCross = false;
           firstComplexCross = i;
@@ -911,7 +911,10 @@ var computeLayout = (function() {
           // For a relative children, we're either using alignItems (parent) or
           // alignSelf (child) in order to determine the position in the cross axis
           if (getPositionType(child) === CSS_POSITION_RELATIVE) {
+            /*eslint-disable */
+            // This variable is intentionally re-defined as the code is transpiled to a block scope language
             var/*css_align_t*/ alignItem = getAlignItem(node, child);
+            /*eslint-enable */
             if (alignItem === CSS_ALIGN_STRETCH) {
               // You can only stretch if the dimension has not already been set
               // previously.
@@ -1048,8 +1051,8 @@ var computeLayout = (function() {
         paddingAndBorderAxisMain
       );
 
-      if (mainAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
+      if (mainAxis === CSS_FLEX_DIRECTION_ROW_REVERSE ||
-          mainAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
+          mainAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
         needsMainTrailingPos = true;
       }
     }
@@ -1063,8 +1066,8 @@ var computeLayout = (function() {
         paddingAndBorderAxisCross
       );
 
-      if (crossAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
+      if (crossAxis === CSS_FLEX_DIRECTION_ROW_REVERSE ||
-          crossAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
+          crossAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
         needsCrossTrailingPos = true;
       }
     }

src/__tests__/Layout-test.js

@@ -11,7 +11,6 @@
 var testLayout = layoutTestUtils.testLayout;
 var testLayoutAgainstDomOnly = layoutTestUtils.testLayoutAgainstDomOnly;
 var testFillNodes = layoutTestUtils.testFillNodes;
-var testExtractNodes = layoutTestUtils.testExtractNodes;
 var text = layoutTestUtils.text;
 var texts = layoutTestUtils.texts;
 var textSizes = layoutTestUtils.textSizes;

src/csharp/Facebook.CSSLayout/LayoutEngine.cs

@@ -718,7 +718,10 @@ namespace Facebook.CSSLayout
             // For a relative children, we're either using alignItems (parent) or
             // alignSelf (child) in order to determine the position in the cross axis
             if (child.style.positionType == CSSPositionType.Relative) {
+              /*eslint-disable */
+              // This variable is intentionally re-defined as the code is transpiled to a block scope language
               CSSAlign alignItem = getAlignItem(node, child);
+              /*eslint-enable */
               if (alignItem == CSSAlign.Stretch) {
                 // You can only stretch if the dimension has not already been set
                 // previously.

src/css-layout.js

@@ -20,7 +20,10 @@
   // @@include('./Layout.js')
 
   return function(node) {
+    /*eslint-disable */
+    // disabling ESLint because this code relies on the above include
     computeLayout.fillNodes(node);
     computeLayout.computeLayout(node);
+    /*eslint-enable */
   };
 }));

src/java/src/com/facebook/csslayout/LayoutEngine.java

@@ -692,7 +692,10 @@ public class LayoutEngine {
           // For a relative children, we're either using alignItems (parent) or
           // alignSelf (child) in order to determine the position in the cross axis
           if (child.style.positionType == CSSPositionType.RELATIVE) {
+            /*eslint-disable */
+            // This variable is intentionally re-defined as the code is transpiled to a block scope language
             CSSAlign alignItem = getAlignItem(node, child);
+            /*eslint-enable */
             if (alignItem == CSSAlign.STRETCH) {
               // You can only stretch if the dimension has not already been set
               // previously.