✈️ migrate to babel STAGE-3

.babelrc

@@ -1,3 +1,11 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-3", "react"],
+  "env": {},
+  "plugins": [
+      "transform-decorators-legacy",
+      "react-html-attrs",
+      "syntax-decorators",
+      "transform-es2015-modules-commonjs",
+      "transform-class-properties"
+  ]
 }

.npmignore

@@ -1,3 +1,8 @@
 src/
 test/
+cdn/
 coverage/
+docs/
+docs-site/
+server.js
+webpack.sample.config.js

README.md

@@ -132,3 +132,19 @@ import {CSVDownload} from 'react-csv';
 
 <CSVDownload data={data} target="_blank" />
 ```
+
+# Contribution :
+
+
+### Run the sample   :
+
+
+- `cd react-csv/`
+
+then :
+
+- `npm install`.
+
+- `npm start`
+
+- browse : `http://localhost:8008`.

cdn/generator.js

@@ -0,0 +1,14 @@
+const rt = process.cwd();
+const {version, name} = require(rt+'/package.json');
+const shell = require('child_process').execSync;
+const cmds ={
+ browserify:(suffix =>`node ${rt}/node_modules/browserify/bin/cmd ${rt}/index.js -o ${rt}/cdn/${name}-${suffix}.js`) ,
+ minify : (suffix => `node node_modules/uglify-js/bin/uglifyjs cdn/${name}-${suffix}.js -o cdn/${name}-${suffix}.min.js`)
+};
+
+
+[version, 'latest'].forEach(r =>
+  Object.keys(cmds).forEach(cmd =>
+    shell(cmds[cmd](r))
+  )
+);

docs/forkme.js

@@ -0,0 +1,6 @@
+const forkme = document.createElement('a');
+forkme.href='http://github.com/abdennour/XXX-PACKAGE-NAME';
+forkme.innerHTML=`
+<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
+`;
+document.body.appendChild(forkme);

package.json

@@ -4,14 +4,16 @@
   "description": "Build CSV files on the fly basing on Array/literal object of data ",
   "main": "index.js",
   "scripts": {
-    "compile": "babel --presets es2015,stage-0,react -d lib/ src/",
-    "prepublish": "npm run compile",
+    "cdn": "node cdn/generator.js",
+    "compile": "babel -d lib/ src/ --no-comments",
+    "prepublish": "npm run compile && npm run cdn",
     "pretest": "npm run compile",
     "test2": "node_modules/.bin/_mocha test",
     "test": "node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha -- test/*.js",
     "coverage": "istanbul cover _mocha -- --ui bdd -R spec -t 5000;open ./coverage/lcov-report/index.html",
     "cover": "node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/.bin/_mocha",
-    "coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | coveralls"
+    "coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
+    "docgen": "documentation build  src/** -f html -o docs"
   },
   "repository": {
     "type": "git",
@@ -40,14 +42,24 @@
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
     "babel-istanbul": "^0.11.0",
+    "babel-loader": "^6.2.8",
+    "babel-plugin-react-html-attrs": "^2.0.0",
+    "babel-plugin-syntax-decorators": "^6.13.0",
+    "babel-plugin-transform-class-properties": "^6.19.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
     "babel-polyfill": "^6.16.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
+    "babel-preset-stage-3": "^6.16.0",
+    "browserify": "^13.3.0",
     "console-info": "0.0.4",
     "coveralls": "^2.11.15",
+    "css-loader": "^0.26.1",
     "enzyme": "^2.6.0",
     "expect": "^1.20.2",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "isparta-loader": "^2.0.0",
     "jsdom": "9.8.3",
     "jsdom-global": "2.1.0",
     "mocha": "^3.2.0",
@@ -55,9 +67,13 @@
     "react": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.4.1",
-    "sinon": "^1.17.6"
-  },
-  "dependencies": {
-    "x-object": "^1.0.10"
+    "sass-loader": "^4.0.2",
+    "sinon": "^1.17.6",
+    "style-loader": "^0.13.1",
+    "uglify-js": "^2.7.5",
+    "webpack": "^1.13.3",
+    "webpack-dev-middleware": "^1.8.4",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-hot-middleware": "^2.13.2"
   }
 }

sample-site/README.md

@@ -0,0 +1,23 @@
+# Overview :
+
+This is a sample website built with React. It aimes to prove the feature of this package in the client side (browser).
+
+# Run the sample :
+
+```bash
+
+git clone https://github.com/abdennour/react-csv.git ;
+cd react-csv;
+npm install;
+npm run start;
+
+```
+
+Then , navigate to :
+
+[http://localhost:8008/](http://localhost:8008/)
+
+```
+...running 🏃🏿 🏃🏻
+🌏 Listening at http://localhost:8008  👏 👏 👌 
+```

sample-site/index.html

@@ -0,0 +1,18 @@
+<html>
+
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>react-csv</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="Still under development. It is not yet mature. Thank you for your understanding!">
+    <meta name="keywords" content="es7,react-csv,react,csv">
+</head>
+
+<body>
+    <div id="app"></div>
+
+    <!-- vendors -->
+    <script src="bundle.js" type="text/javascript"></script>
+</body>
+
+</html>

sample-site/src/app.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {CSVLink, CSVDownload} from 'react-csv';
+
+const csvData =[
+  ['firstname', 'lastname', 'email'] ,
+  ['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
+  ['Raed', 'Labes' , 'rl@smthing.co.com'] ,
+  ['Yezzi','Min l3b', 'ymin@cocococo.com']
+];
+
+class App extends React.Component {
+
+  render() {
+    return (
+      <div style={{padding: 10}}>
+        <h1>react-csv</h1>
+        <div>
+
+          Download CSV <CSVLink data={csvData}> here </CSVLink>.
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

sample-site/src/boot.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('app'));

server.js

@@ -0,0 +1,32 @@
+var express = require('express')
+var webpack = require('webpack')
+var merge = require('lodash/merge')
+var config = merge({}, require('./webpack.sample.config'))
+
+config.devtool = 'cheap-module-eval-source-map'
+config.entry.unshift('webpack-hot-middleware/client')
+config.plugins.push(
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NoErrorsPlugin()
+)
+
+var app = express()
+var compiler = webpack(config)
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}))
+
+app.use(require('webpack-hot-middleware')(compiler))
+
+app.use(express.static('sample-site'))
+
+app.listen(8008, 'localhost', function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+  console.log(`...running 🏃🏿 🏃🏻 `);
+  console.log('🌏 Listening at http://localhost:8008  👏 👏 👌 ');
+})

src/components/Link.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import {buildURI} from '../core';
 import {defaultProps, PropTypes, PropsNotForwarded} from '../metaProps';
-import XObject from 'x-object/safe';
 
 class CSVLink extends React.Component {
   constructor(props) {
@@ -14,10 +13,11 @@ class CSVLink extends React.Component {
   }
 
   render(){
+    const {data, headers, children , ...rest} = this.props;
     return (
-      <a {...XObject.filter(this.props, (k, v) => !PropsNotForwarded.includes(k))}
-         href={this.buildURI(this.props.data, this.props.headers)}>
-        {this.props.children}
+      <a {...rest}
+         href={this.buildURI(data, headers)}>
+        {children}
       </a>
     )
   }

webpack.sample.config.js

@@ -0,0 +1,38 @@
+var path = require('path')
+var webpack = require('webpack')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  entry: [
+    './sample-site/src/boot'
+  ],
+  output: {
+    path: path.resolve('./sample-site/'),
+    filename: 'bundle.js',
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+
+    // Needed to direct the sample to the local version of the datepicker, this is not needed for
+    // normal setup.
+    alias: {
+      'react-csv': path.resolve('./src/index.js')
+    }
+  },
+  module: {
+    loaders: [
+      { test: /\.js/, loader: 'babel', exclude: /node_modules/ },
+      { test: /\.scss/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') },
+      { test: /\.css/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+    ]
+  },
+  node: { Buffer: false },
+  plugins: [
+    new webpack.optimize.DedupePlugin(),
+    new ExtractTextPlugin('style.css', { allChunks: true }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    })
+  ]
+}