Added eslint to the build

Fixes #102

.eslintrc

@@ -19,10 +19,6 @@
         "define": true
     },
     "rules": {
-        "quotes": "single",
+        "quotes": [2, "single"]
-        "strict": 0,
-        "no-console": false,
-        "no-shadow": false,
-        "no-underscore-dangle": false
     }
 }

Gruntfile.js

@@ -2,6 +2,8 @@
 
 module.exports = function(grunt) {
 
+  require('load-grunt-tasks')(grunt);
+
   grunt.initConfig({
 
     paths: {
@@ -12,6 +14,13 @@ module.exports = function(grunt) {
 
     clean: ['<%= paths.distFolder %>'],
 
+    eslint: {
+      options: {
+        configFile: '.eslintrc'
+      },
+      target: ['<%= paths.srcFolder %>/Layout.js']
+    },
+
     copy: {
       main: {
         expand: true,
@@ -52,13 +61,7 @@ module.exports = function(grunt) {
     }
   });
 
-  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.registerTask('build', ['eslint', 'clean', 'karma' ,'copy', 'uglify']);
-  grunt.loadNpmTasks('grunt-contrib-copy');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-karma');
-
-  grunt.registerTask('build', ['clean', 'karma' ,'copy', 'uglify']);
 
   grunt.registerTask('default', ['build']);
-
 };

package.json

@@ -3,10 +3,6 @@
   "version": "0.0.2",
   "description": "Reimplementation of CSS layout using pure JavaScript",
   "main": "src/main.js",
-  "scripts": {
-    "pretest": "./node_modules/eslint/bin/eslint.js src",
-    "test": "./node_modules/karma/bin/karma start ./karma.conf.js --single-run"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/css-layout.git"
@@ -18,16 +14,17 @@
   },
   "homepage": "https://github.com/facebook/css-layout",
   "devDependencies": {
-    "eslint": "^0.14.1",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-uglify": "^0.9.1",
+    "grunt-eslint": "^17.1.0",
     "grunt-karma": "^0.12.0",
     "jasmine-core": "^2.2.0",
     "karma": "^0.13.8",
     "karma-chrome-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.5"
+    "karma-jasmine": "^0.3.5",
+    "load-grunt-tasks": "^3.2.0"
   }
 }

src/JavaTranspiler.js

@@ -140,8 +140,8 @@ var JavaTranspiler = {
     var allTestsInJava = [];
     for (var i = 0; i < allTestsInC.length; i++) {
       allTestsInJava[i] =
-          "  @Test\n" +
+          '  @Test\n' +
-          "  public void testCase" + i + "()\n" +
+          '  public void testCase' + i + '()\n' +
           __transpileSingleTestToJava(allTestsInC[i]);
     }
     return allTestsInJava.join('\n\n');

src/Layout-test-utils.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
-/* globals document, computeLayout */
+/* globals document, computeLayout, navigator */
 
 var layoutTestUtils = (function() {
 
@@ -415,7 +415,7 @@ var layoutTestUtils = (function() {
   // Note(prenaux): Clearly not what I would like, but it seems to be the only
   //                way :( My guess is that since the font on Windows is
   //                different than on OSX it has a different size.
-  if (typeof navigator !== 'undefined' && navigator.userAgent.indexOf("Windows NT") > -1) {
+  if (typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Windows NT') > -1) {
     preDefinedTextSizes.bigHeight = 36;
   }
 
@@ -450,7 +450,7 @@ var layoutTestUtils = (function() {
       testNamedLayout('expected-dom', expectedLayout, domLayout);
       testNamedLayout('layout-dom', layout, domLayout);
     },
-    testLayoutAgainstDomOnly: function(node, expectedLayout) {
+    testLayoutAgainstDomOnly: function(node) {
       var layout = computeCSSLayout(node);
       var domLayout = computeDOMLayout(node);
       inplaceRoundNumbersInObject(layout);

src/__tests__/Layout-test.js

@@ -2122,7 +2122,7 @@ describe('Layout', function() {
       {style: {width: 400, height: 400}, children: [
         {style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10}, children: [
           {style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
-        ]},
+        ]}
       ]},
       {width: 400, height: 400, top: 0, left: 0, children: [
         {width: 200, height: 200, top: 100, left: 100, children: [
@@ -2137,7 +2137,7 @@ describe('Layout', function() {
       {style: {width: 400, height: 400}, children: [
         {style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10, borderWidth: 1}, children: [
           {style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
-        ]},
+        ]}
       ]},
       {width: 400, height: 400, top: 0, left: 0, children: [
         {width: 200, height: 200, top: 100, left: 100, children: [
@@ -2152,7 +2152,7 @@ describe('Layout', function() {
       {style: {width: 400, height: 400}, children: [
         {style: {flex: 1, padding: 10}, children: [
           {style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
-        ]},
+        ]}
       ]},
       {width: 400, height: 400, top: 0, left: 0, children: [
         {width: 400, height: 400, top: 0, left: 0, children: [
@@ -2195,7 +2195,7 @@ describe('Layout', function() {
         {style: {width: 100, height: 100}},
         {style: {width: 100, height: 100}},
         {style: {width: 100, height: 100}},
-        {style: {width: 100, height: 100}},
+        {style: {width: 100, height: 100}}
       ]},
       {width: 320, height: 200, top: 0, left: 0, children: [
         {width: 100, height: 100, top: 0, left: 0},
@@ -2203,7 +2203,7 @@ describe('Layout', function() {
         {width: 100, height: 100, top: 0, left: 220},
         {width: 100, height: 100, top: 100, left: 0},
         {width: 100, height: 100, top: 100, left: 110},
-        {width: 100, height: 100, top: 100, left: 220},
+        {width: 100, height: 100, top: 100, left: 220}
       ]}
     );
   });
@@ -2330,24 +2330,24 @@ describe('Layout alignContent', function() {
     testLayout(
       {style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap', alignContent: 'stretch', alignItems: 'flex-start'},
        children: [
-         /* 0 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 0 */ {style: {width: 50, height: 50, margin: 10}},
-         /* 1 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 1 */ {style: {width: 50, height: 50, margin: 10}},
-         /* 2 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 2 */ {style: {width: 50, height: 50, margin: 10}},
-         /* 3 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 3 */ {style: {width: 50, height: 50, margin: 10}},
-         /* 4 */  {style: {width: 50, height: 100, margin: 10}},
+         /* 4 */ {style: {width: 50, height: 100, margin: 10}},
-         /* 5 */  {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
+         /* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
-         /* 6 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 6 */ {style: {width: 50, height: 50, margin: 10}},
-         /* 7 */  {style: {width: 50, height: 100, margin: 10}},
+         /* 7 */ {style: {width: 50, height: 100, margin: 10}},
-         /* 8 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 8 */ {style: {width: 50, height: 50, margin: 10}},
-         /* 9 */  {style: {width: 50, height: 50, margin: 10}},
+         /* 9 */ {style: {width: 50, height: 50, margin: 10}},
          /* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }},
          /* 11 */ {style: {width: 50, height: 50, margin: 10}},
          /* 12 */ {style: {width: 50, height: 50, margin: 10}},
          /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
-         /* 14 */ {style: {width: 50, height: 50, margin: 10}},
+         /* 14 */ {style: {width: 50, height: 50, margin: 10}}
-       ],
+       ]
       },
-      {width: 300, height: 380, top: 0, left: 0,  children: [
+      {width: 300, height: 380, top: 0, left: 0, children: [
         {width: 50, height: 50, top: 10, left: 10},
         {width: 50, height: 50, top: 10, left: 80},
         {width: 50, height: 50, top: 10, left: 150},
@@ -2373,22 +2373,22 @@ describe('Layout alignContent', function() {
       testLayoutAgainstDomOnly(
         {style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap', alignContent: alignContent, alignItems: alignItems},
          children: [
-           /* 0 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 0 */ {style: {width: 50, height: 50, margin: 10}},
-           /* 1 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 1 */ {style: {width: 50, height: 50, margin: 10}},
-           /* 2 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 2 */ {style: {width: 50, height: 50, margin: 10}},
-           /* 3 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 3 */ {style: {width: 50, height: 50, margin: 10}},
-           /* 4 */  {style: {width: 50, height: 100, margin: 10}},
+           /* 4 */ {style: {width: 50, height: 100, margin: 10}},
-           /* 5 */  {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
+           /* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
-           /* 6 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 6 */ {style: {width: 50, height: 50, margin: 10}},
-           /* 7 */  {style: {width: 50, height: 100, margin: 10}},
+           /* 7 */ {style: {width: 50, height: 100, margin: 10}},
-           /* 8 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 8 */ {style: {width: 50, height: 50, margin: 10}},
-           /* 9 */  {style: {width: 50, height: 50, margin: 10}},
+           /* 9 */ {style: {width: 50, height: 50, margin: 10}},
            /* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }},
            /* 11 */ {style: {width: 50, height: 50, margin: 10}},
            /* 12 */ {style: {width: 50, height: 50, margin: 10}},
            /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
-           /* 14 */ {style: {width: 50, height: 50, margin: 10}},
+           /* 14 */ {style: {width: 50, height: 50, margin: 10}}
-         ],
+         ]
         }
       );
     });

src/transpile.js

@@ -20,7 +20,7 @@ global.layoutTestUtils = {
   testLayout: function(node, expectedLayout) {
     allTests.push({name: currentTest, node: node, expectedLayout: expectedLayout});
   },
-  testLayoutAgainstDomOnly: function(node) {
+  testLayoutAgainstDomOnly: function() {
   },
   testRandomLayout: function(node, i) {
     allTests.push({name: 'Random #' + i, node: node, expectedLayout: computeDOMLayout(node)});
@@ -272,15 +272,14 @@ function transpileAnnotatedJStoC(jsCode) {
 }
 
 function makeConstDefs() {
-  /* eslint no-multi-spaces: 3 */
   var lines = [
-    '#define SMALL_WIDTH '   + layoutTestUtils.textSizes.smallWidth,
+    '#define SMALL_WIDTH ' + layoutTestUtils.textSizes.smallWidth,
-    '#define SMALL_HEIGHT '  + layoutTestUtils.textSizes.smallHeight,
+    '#define SMALL_HEIGHT ' + layoutTestUtils.textSizes.smallHeight,
-    '#define BIG_WIDTH '     + layoutTestUtils.textSizes.bigWidth,
+    '#define BIG_WIDTH ' + layoutTestUtils.textSizes.bigWidth,
-    '#define BIG_HEIGHT '    + layoutTestUtils.textSizes.bigHeight,
+    '#define BIG_HEIGHT ' + layoutTestUtils.textSizes.bigHeight,
     '#define BIG_MIN_WIDTH ' + layoutTestUtils.textSizes.bigMinWidth,
-    '#define SMALL_TEXT "'   + layoutTestUtils.texts.small + '"',
+    '#define SMALL_TEXT "' + layoutTestUtils.texts.small + '"',
-    '#define LONG_TEXT "'    + layoutTestUtils.texts.big + '"'
+    '#define LONG_TEXT "' + layoutTestUtils.texts.big + '"'
   ];
   return lines.join('\n');
 }