start babelification

Author: carlosrocha

.eslintignore

@@ -1,3 +1,7 @@
+# vim: ft=yaml
+
+parser: babel-eslint
+
 plugins:
   - react
 
@@ -11,12 +15,15 @@ globals:
   jest: false
 
 ecmaFeatures:
+  modules: true
   jsx: true
 
 rules:
-  semi: true
+  strict: [ 2, 'global' ]
   quotes: [ 2, 'single' ]
   curly: [ 2, 'multi-line' ]
+  eqeqeq: [ 2, 'smart' ]
   block-scoped-var: 2
-  no-underscore-dangle: false
+  comma-dangle: [ 2, 'always-multiline' ]
+  no-underscore-dangle: 0
   react/jsx-uses-react: 1

.eslintrc

@@ -1,12 +1,10 @@
-var keyMirror = require('keymirror');
-
 module.exports = {
 
-  ActionTypes: keyMirror({
-    DATA_SORT: null,
-    DATA_CHANGE_PAGE_NUMBER: null,
-    DATA_RECEIVE: null,
-    DATA_FILTER: null
-  })
+  ActionTypes: {
+    DATA_SORT: 'DATA_SORT',
+    DATA_CHANGE_PAGE_NUMBER: 'DATA_CHANGE_PAGE_NUMBER',
+    DATA_RECEIVE: 'DATA_RECEIVE',
+    DATA_FILTER: 'DATA_FILTER',
+  },
 
 };

dist/react-data-components.min.js

@@ -26,6 +26,7 @@ function getStateFromStore() {
 class FluxTable extends React.Component {
 
   constructor() {
+    super();
     this.state = getStateFromStore();
     this.handleStoreChange = this.handleStoreChange.bind(this);
   }

example/flux/AppConstants.js

@@ -1,5 +1,3 @@
-require('../../css/table-twbs.css');
-
 var React = require('react');
 var FluxTable = require('./FluxTable');
 var WebAPIUtils = require('./WebAPIUtils');

example/flux/FluxTable.js

@@ -1,5 +1,3 @@
-require('../../css/table-twbs.css');
-
 var React = require('react');
 var { DataTable } = require('react-data-components');
 var d3 = require('d3');
@@ -16,7 +14,7 @@ function buildTable(data) {
     { title: 'City', prop: 'CITY' },
     { title: 'Street address', prop: 'STREET ADDRESS' },
     { title: 'Phone', prop: 'PHONE NUMBER', defaultContent: '<no phone>' },
-    { title: 'Map', render: renderMapUrl, className: 'text-center' }
+    { title: 'Map', render: renderMapUrl, className: 'text-center' },
   ];
 
   return (

example/flux/app.js

@@ -1,23 +1,28 @@
 module.exports = {
-  devtool: 'eval',
-  cache: true,
+  context: __dirname,
+  devServer: {
+    contentBase: __dirname,
+  },
   entry: {
     flux: './flux/app',
-    table: './table/main'
+    table: './table/main',
   },
   output: {
-    filename: '[name].entry.js'
+    filename: '[name].entry.js',
   },
   resolve: {
     alias: {
       // Use uncompiled version
-      'react-data-components': '../../src'
-    }
+      'react-data-components': '../../src',
+    },
   },
   module: {
     loaders: [
-      { test: /\.js$/, loader: 'jsx?harmony' },
-      { test: /\.css$/, loader: 'style!css' }
-    ]
-  }
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+    ],
+  },
 };

example/table/main.js

@@ -3,50 +3,53 @@
   "version": "0.4.0",
   "description": "React data components",
   "keywords": [
+    "pagination",
     "react",
     "react-component",
-    "table",
-    "pagination"
+    "table"
   ],
   "author": "Carlos Rocha",
   "license": "MIT",
   "main": "./lib/index",
   "files": [
-    "css",
-    "lib",
+    "CHANGELOG.md",
     "LICENSE",
-    "CHANGELOG.md"
+    "css",
+    "lib"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/carlosrocha/react-data-components"
   },
+  "babel": {
+    "stage": 0
+  },
   "peerDependencies": {
     "react": "^0.13.0"
   },
   "devDependencies": {
-    "css-loader": "^0.7.1",
-    "d3": "^3.4.11",
+    "babel": "^5.8.21",
+    "babel-eslint": "^4.0.8",
+    "babel-jest": "^5.3.0",
+    "babel-loader": "^5.3.1",
+    "d3": "^3.5.6",
+    "eslint": "^1.1.0",
+    "eslint-plugin-react": "^3.2.2",
     "flux": "^2.0.3",
-    "jest-cli": "^0.4.0",
-    "jsx-loader": "^0.13.1",
-    "keymirror": "^0.1.1",
-    "object-assign": "^2.0.0",
-    "react-tools": "^0.13.2",
-    "style-loader": "^0.7.1",
-    "webpack": "^1.8.9",
-    "webpack-dev-server": "^1.8.2"
+    "jest-cli": "^0.5.0",
+    "webpack": "^1.11.0",
+    "webpack-dev-server": "^1.10.1"
   },
   "scripts": {
-    "prepublish": "jsx --harmony --no-cache-dir src lib",
-    "start": "cd example && webpack-dev-server -d --progress --colors --hot --inline",
+    "lint": "eslint src",
+    "prepublish": "webpack -p",
+    "start": "webpack-dev-server -d --config example/webpack.config.js",
     "test": "jest"
   },
   "jest": {
-    "rootDir": "src",
-    "scriptPreprocessor": "../jest/preprocessor.js",
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
     "unmockedModulePathPatterns": [
-      "../node_modules/react"
+      "<rootDir>/node_modules/react"
     ]
   }
 }

example/webpack.config.js

@@ -1,5 +1,3 @@
-'use strict';
-
 var { sort, filter } = require('./utils');
 
 var containsIgnoreCase = function(a, b) {
@@ -15,7 +13,7 @@ function buildInitialState(props) {
     sortBy: props.initialSortBy,
     filterValues: {},
     currentPage: 0,
-    pageLength: props.initialPageLength
+    pageLength: props.initialPageLength,
   };
 }
 
@@ -31,9 +29,9 @@ module.exports = {
       pageLengthOptions: [ 5, 10, 20 ],
       filters: {
         globalSearch: {
-          filter: containsIgnoreCase
-        }
-      }
+          filter: containsIgnoreCase,
+        },
+      },
     };
   },
 
@@ -52,7 +50,7 @@ module.exports = {
   onSort(sortBy) {
     this.setState({
       sortBy: sortBy,
-      data: sort(sortBy, this.state.data)
+      data: sort(sortBy, this.state.data),
     });
   },
 
@@ -67,7 +65,7 @@ module.exports = {
     this.setState({
       data: newData,
       filterValues: filterValues,
-      currentPage: 0
+      currentPage: 0,
     });
   },
 
@@ -79,7 +77,7 @@ module.exports = {
     return {
       data: data.slice(start, start + pageLength),
       currentPage: currentPage,
-      totalPages: Math.ceil(data.length / pageLength)
+      totalPages: Math.ceil(data.length / pageLength),
     };
   },
 
@@ -94,8 +92,8 @@ module.exports = {
 
     this.setState({
       pageLength: newPageLength,
-      currentPage: newPage
+      currentPage: newPage,
     });
-  }
+  },
 
 };

jest/preprocessor.js

@@ -1,5 +1,3 @@
-'use strict';
-
 var React = require('react');
 var Table = require('./Table');
 var Pagination = require('./Pagination');
@@ -53,7 +51,7 @@ var DataTable = React.createClass({
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = DataTable;