React 0.14

.eslintrc

@@ -0,0 +1,28 @@
+{
+  "rules": {
+    "array-bracket-spacing": [2, "never"],
+    "indent": [2, 2],
+    "linebreak-style": [2, "unix"],
+    "no-console": 1,
+    "object-curly-spacing": [2, "never"],
+    "quotes": [2, "double", "avoid-escape"],
+    "semi": [2,"always"],
+    "space-infix-ops": 2,
+
+    // react rules
+    "react/jsx-quotes": [2, "double"],
+    "react/jsx-uses-react": 2
+  },
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "ecmaFeatures": {
+    "jsx": true
+  },
+  "plugins": [
+    "react"
+  ]
+}

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - "0.10"
+  - "4"

gulpfile.js

@@ -1,22 +1,21 @@
-/* jshint node:true */
-
 "use strict";
 
 var gulp = require("gulp");
-var browserify = require('browserify');
-var watchify = require('watchify');
-var source = require('vinyl-source-stream');
-var uglify = require('gulp-uglify');
-var webserver = require("gulp-webserver");
+var browserify = require("browserify");
+var watchify = require("watchify");
+var source = require("vinyl-source-stream");
+var uglify = require("gulp-uglify");
 var deploy = require("gulp-gh-pages");
 
+var extend = require("util")._extend;
+
 var opt = {
   outputFolder: "build",
 
   server: {
     host: "localhost",
     port: 4000,
-    livereload: true,
+    livereload: 35729,
     open:true
   },
 
@@ -38,12 +37,16 @@ var opt = {
   ],
 
   app: {
-    src: "src/js/kept.js",
+    src: "src/js/kept.jsx",
     dest: "kept.js"
   },
   vendors: "vendors.js"
 };
 
+var jsxOpt = {
+  extensions: [".jsx"]
+};
+
 /**
  * Assets tasks
  */
@@ -75,12 +78,14 @@ gulp.task("assets:fonts", function() {
 gulp.task("js", [
   "js:vendors",
   "js:app"
-  ]);
+]);
 
 gulp.task("js:app", ["js:vendors"], function() {
-  return browserify("./" + opt.app.src)
-    .transform("reactify")
+  return browserify(jsxOpt)
+    .add("./" + opt.app.src)
+    .transform("reactify", {global: true})
     .external("react")
+    .external("react-dom")
     .external("react-bootstrap")
     .external("marked")
     .bundle()
@@ -91,6 +96,7 @@ gulp.task("js:app", ["js:vendors"], function() {
 gulp.task("js:vendors", function() {
   return browserify()
     .require("react")
+    .require("react-dom")
     .require("react-bootstrap")
     .require("marked")
     .bundle()
@@ -102,38 +108,44 @@ gulp.task("js:vendors", function() {
 /**
  * Server task
  */
+var connect = require("connect");
+var livereload = require("connect-livereload");
+var staticFile = require("serve-static");
+var lrServer = require("tiny-lr")();
+
 gulp.task("server", function() {
-   return gulp.src(opt.outputFolder)
-    .pipe(webserver(opt.server));
+
+  lrServer
+    .listen(opt.server.livereload);
+
+  connect()
+    .use(livereload({port: opt.server.livereload}))
+    .use(staticFile(opt.outputFolder))
+    .listen(4000);
 });
 
 /**
  * Watchify
  */
 
 gulp.task("watchify", function(){
+  var args = extend(watchify.args,  jsxOpt);
 
-  var b = browserify( "./" + opt.app.src , watchify.args)
-    .transform("reactify")
+  var b = browserify("./" + opt.app.src, args)
+    .transform("reactify", {global: true})
     .external("react")
+    .external("react-dom")
     .external("react-bootstrap")
     .external("marked");
 
-
-  function updateBundle(w){
-
-    return w.bundle()
+  return watchify(b).on("update", function(){
+    b.bundle()
       .pipe(source(opt.app.dest))
       .pipe(gulp.dest(opt.outputFolder + "/js"));
-  }
-
-  var watcher= watchify(b);
-  watcher.on("update", function(){
-    updateBundle(watcher);
-  });
-
-  return updateBundle(watcher);
-
+  })
+    .bundle()
+    .pipe(source(opt.app.dest))
+    .pipe(gulp.dest(opt.outputFolder + "/js"));
 });
 
 
@@ -147,6 +159,9 @@ gulp.task("watch", ["assets","js:vendors", "watchify"], function() {
   gulp.watch(opt.cssAssets,  ["assets:css"]);
   gulp.watch(opt.fontAssets, ["assets:fonts"]);
   gulp.watch(opt.htmlAssets, ["assets:html"]);
+  gulp.watch(opt.outputFolder + "/**/*", function(file){
+    lrServer.changed({body : {files : [file.path]}});
+  });
 });
 
 gulp.task("dist", ["assets", "js"], function() {
@@ -163,4 +178,8 @@ gulp.task("deploy", ["dist"], function() {
     .pipe(deploy("[email protected]:n1k0/kept.git"));
 });
 
-gulp.task("default", ["server", "watch"]);
+gulp.task("default", ["server", "watch"], function(done){
+  console.log("app running at http://" + opt.server.host + ":" + opt.server.port);
+  require("opn")("http://" + opt.server.host + ":" + opt.server.port);
+  done();
+});

package.json

@@ -6,10 +6,10 @@
   "scripts": {
     "deploy": "gulp deploy",
     "dist": "gulp dist",
-    "lint": "jsxhint -c .jshintrc src/js",
+    "lint": "eslint --ext .js --ext .jsx src gulpfile.js",
     "start": "gulp",
-    "test": " npm run lint && jest --config jest-config.json",
-    "test-win": "npm run lint && jest --config jest-config-win.json"
+    "test": "mocha src/**/__tests__/*",
+    "tdd": "mocha --watch ./src/**/__tests__/*.*"
   },
   "repository": {
     "type": "git",
@@ -27,21 +27,30 @@
   },
   "homepage": "https://github.com/n1k0/kept",
   "dependencies": {
+    "browserify": "^11.0.1",
+    "connect": "^3.3.3",
+    "connect-livereload": "^0.5.2",
     "gulp": "^3.8.*",
-    "gulp-gh-pages": "^0.3.*",
-    "gulp-uglify": "^0.3.*",
+    "gulp-gh-pages": "^0.5.*",
+    "gulp-uglify": "^1.4.*",
     "marked": "^0.3.*",
-    "react": "^0.10.*",
-    "react-bootstrap": "^0.10.*",
-    "reactify": "^0.13.*",
-    "vinyl-source-stream": "^0.1.*",
-    "watchify": "^1.0.6",
-    "browserify": "^6.0.2",
-    "gulp-webserver": "^0.8.3"
+    "opn": "^3.0.2",
+    "react": "^0.14.0-beta3",
+    "react-bootstrap": "^0.25.100-react-pre.0",
+    "react-dom": "^0.14.0-beta3",
+    "reactify": "^1.1.*",
+    "serve-static": "^1.7.1",
+    "tiny-lr": "^0.1.4",
+    "vinyl-source-stream": "^1.1.*",
+    "watchify": "^3.4.0"
   },
   "devDependencies": {
-    "jest-cli": "latest",
-    "jsxhint": "latest",
-    "react-tools": "latest"
+    "babel": "^5.8.23",
+    "chai": "^3.2.0",
+    "eslint": "^1.4.1",
+    "eslint-plugin-react": "^3.3.2",
+    "jsdom": "^6.3.0",
+    "mocha": "^2.3.2",
+    "sinon": "^1.16.1"
   }
 }

src/css/kept.css

@@ -57,10 +57,12 @@ body {
     .kept-modal .kept-panel .panel-heading {
       cursor: default;
     }
-    .kept-panel h3 a {
-      display: block;
+    .kept-panel h3 button {
+      display: inline-block;
       float: right;
       margin-left: .5em;
+      padding: 0;
+      color: #fff;
     }
 
 .targetted {

src/js/components/DefaultContent.js → src/js/components/DefaultContent.jsx

@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");

src/js/components/GlyphiconLink.js → src/js/components/GlyphiconLink.jsx

@@ -1,14 +1,13 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");
+var Button = require("react-bootstrap").Button;
 var Glyphicon = require("react-bootstrap").Glyphicon;
 
 var GlyphiconLink = React.createClass({
   render: function() {
-    return this.transferPropsTo(
-      <a><Glyphicon glyph={this.props.glyph} /></a>
+    return (
+      <Button bsStyle="link" {...this.props} ><Glyphicon glyph={this.props.glyph} /></Button>
     );
   }
 });

src/js/components/KeptApp.js → src/js/components/KeptApp.jsx

@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var utils = require("../utils");
@@ -107,7 +105,6 @@ var KeptApp = React.createClass({
   move: function(fromIndex, toIndex) {
     // permut don't mutate array, return a new array
     var items = utils.permut(this.state.items, fromIndex, toIndex);
-
     this.save(items);
   },
 

src/js/components/KeptColumns.js → src/js/components/KeptColumns.jsx

@@ -1,6 +1,3 @@
-/**
- * @jsx React.DOM
- */
 "use strict";
 
 var React = require("react");
@@ -15,6 +12,7 @@ var KeptColumns = React.createClass({
           var key = index * this.props.columns + this.props.column;
 
           return <KeptEntry key={key}
+                            itemIndex={key}
                             itemData={itemData}
                             edit={this.props.edit}
                             remove={this.props.remove}