reflux draft

bower.json

@@ -8,7 +8,8 @@
     "moment": "2.9.0",
     "react": "0.13.2",
     "requirejs": "2.1.17",
-    "jquery": "1.10.2"
+    "jquery": "1.10.2",
+    "reflux": "~0.2.7"
   },
   "moduleType": [
     "amd"

gulpfile.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var gulp = require('gulp');
+var gulpReactJade = require('gulp-react-jade-amd');
+
+gulp.task('react-jade', function() {
+	return gulp.src('static/js/**/*.jade')
+		.pipe(gulpReactJade())
+		.pipe(gulp.dest('static/js/templates'));
+});

package.json

@@ -28,6 +28,8 @@
   "homepage": "https://github.com/okv/nci",
   "dependencies": {
     "data.io": "0.3.0",
+    "gulp": "^3.8.11",
+    "gulp-react-jade": "git://github.com/mizchi/gulp-react-jade",
     "jade": "1.9.2",
     "node-static": "0.7.6",
     "socket.io": "1.3.5",

static/js/app/actions/project.js

@@ -0,0 +1,10 @@
+'use strict';
+
+define(['reflux'], function(Reflux) {
+	var Actions = Reflux.createActions([
+		'load',
+		'readAll'
+	]);
+
+	return Actions;
+});

static/js/app/app.js

@@ -1,33 +1,36 @@
 'use strict';
 
 define([
-	'underscore', 'react', 'socketio', 'dataio', 'jquery'
+	'react', 'templates/app/index', 'app/components/index',
+	'app/actions/project'
 ], function(
-	_, React, socketio, dataio, $
+	React, template, Components, ProjectActions
 ) {
-	var connect = dataio(socketio.connect());
+	//var projectsTemplate = _($('#projects-template').html()).template();
+	//$('#content').on('click', '.js-projects .js-run', function() {
+		//var projectName = $(this).parent('.js-project').data('name');
+		//projects.sync('run', {projectName: projectName}, function(err, result) {
+			//$('#content').append(
+				//(err && err.message)
+			//);
+		//});
+	//});
 
-	var projects = connect.resource('projects');
-	var builds = connect.resource('builds');
+	//projects.sync('read', function(err, projects) {
+		//console.log('read complete');
+		////$('#content').html(
+			////(err && err.message) ||
+			////projectsTemplate({projects: projects})
+		////);
+	//});
 
-	var projectsTemplate = _($('#projects-template').html()).template();
-	$('#content').on('click', '.js-projects .js-run', function() {
-		var projectName = $(this).parent('.js-project').data('name');
-		projects.sync('run', {projectName: projectName}, function(err, result) {
-			$('#content').append(
-				(err && err.message)
-			);
-		});
-	});
+	//builds.subscribe(function(data, action) {
+		//$('#content').append(action.action + ': ' + JSON.stringify(data));
+	//});
 
-	projects.sync('read', function(err, projects) {
-		$('#content').html(
-			(err && err.message) ||
-			projectsTemplate({projects: projects})
-		);
-	});
+	React.render(template({
+		App: Components.App
+	}), document.getElementById('react-content'));
 
-	builds.subscribe(function(data, action) {
-		$('#content').append(action.action + ': ' + JSON.stringify(data));
-	});
+	ProjectActions.readAll();
 });

static/js/app/components/app.jade

@@ -0,0 +1,6 @@
+div
+	h1 application
+
+	ProjectsList()
+
+

static/js/app/components/app.js

@@ -0,0 +1,22 @@
+'use strict';
+
+define([
+	'react',
+	'app/components/projects/index',
+	'templates/app/components/app'
+], function(React, Projects, template) {
+	var Component = React.createClass({
+		getInitialState: function() {
+			return {
+				projects: []
+			};
+		},
+		render: function() {
+			return template({
+				ProjectsList: Projects.List
+			});
+		}
+	});
+
+	return Component;
+});

static/js/app/components/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+define([
+	'app/components/projects/index',
+	'app/components/app',
+], function(ProjectsComponents, App) {
+	return {
+		App: App,
+		ProjectsComponents: ProjectsComponents
+	};
+});

static/js/app/components/projects/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+define([
+	'app/components/projects/item',
+	'app/components/projects/list'
+], function(Item, List) {
+	return {
+		Item: Item,
+		List: List
+	};
+});

static/js/app/components/projects/item.jade

@@ -0,0 +1 @@
+h1= item.name

static/js/app/components/projects/item.js

@@ -0,0 +1,15 @@
+'use strict';
+
+define([
+	'react', 'templates/app/components/projects/item'
+], function(React, template) {
+	var Component = React.createClass({
+		render: function() {
+			return template({
+				item: this.props.item
+			});
+		}
+	});
+
+	return Component;
+});

static/js/app/components/projects/list.jade

@@ -0,0 +1,5 @@
+div
+	h2 projects list
+	- console.log(this);
+	each project in items
+		Item(item=project)

static/js/app/components/projects/list.js

@@ -0,0 +1,32 @@
+'use strict';
+
+define([
+	'react',
+	'reflux',
+	'./item', 
+	'app/stores/project',
+	'templates/app/components/projects/list'
+], function(React, Reflux, Item, projectStore, template) {
+	var Component = React.createClass({
+		mixins: [Reflux.ListenerMixin],
+		componentDidMount: function() {
+			this.listenTo(projectStore, this.updateItems);
+		},
+		updateItems: function(items) {
+			this.setState({items: items});
+		},
+		render: function() {
+			return template({
+				Item: Item,
+				items: this.state.items
+			});
+		},
+		getInitialState: function() {
+			return {
+				items: []
+			};
+		}
+	});
+
+	return Component;
+});

static/js/app/index.jade

@@ -0,0 +1,2 @@
+div
+	App()

static/js/app/resources.js

@@ -0,0 +1,15 @@
+'use strict';
+
+define([
+	'socketio', 'dataio'
+], function(socketio, dataio) {
+	var connect = dataio(socketio.connect());
+
+	var projects = connect.resource('projects');
+	var builds = connect.resource('builds');
+
+	return {
+		projects: projects,
+		builds: builds
+	}
+});

static/js/app/stores/project.js

@@ -0,0 +1,24 @@
+'use strict';
+
+define([
+	'reflux', 'app/actions/project', 'app/resources'
+], function(Reflux, ProjectActions, resources) {
+	var Store = Reflux.createStore({
+		init: function() {
+			this.listenTo(ProjectActions.load, this.load);
+			this.listenTo(ProjectActions.readAll, this.readAll);
+		},
+		load: function(items) {
+			this.trigger(items);
+		},
+		readAll: function() {
+			resources.projects.sync('read', function(err, projects) {
+				console.log(err);
+				console.log(projects);
+				ProjectActions.load(projects)
+			});
+		}
+	});
+
+	return Store;
+});

static/js/main.js

@@ -5,6 +5,7 @@ require.config({
 	paths: {
 		underscore: 'libs/underscore/underscore',
 		react: 'libs/react/react-with-addons',
+		reflux: 'libs/reflux/dist/reflux',
 		dataio: '/data.io',
 		socketio: '/socket.io/socket.io.js',
 		jquery: 'libs/jquery/jquery'

static/js/templates/app/components/app.js

@@ -0,0 +1,33 @@
+define(['react'], function(React) {return (function (React) {
+  var fn = function(locals) {
+    var tags = [];
+    var locals_for_with = locals || {};
+    (function(ProjectsList) {
+      tags.push(React.createElement("div", {}, React.createElement("h1", {}, "application"), React.createElement(ProjectsList, {})));
+    }).call(this, "ProjectsList" in locals_for_with ? locals_for_with.ProjectsList : typeof ProjectsList !== "undefined" ? ProjectsList : undefined);
+    if (tags.length === 1 && !Array.isArray(tags[0])) {
+      return tags.pop();
+    }
+    tags.unshift("div", null);
+    return React.createElement.apply(React, tags);
+  };
+  
+  fn.locals = function setLocals(locals) {
+    var render = this;
+    function newRender(additionalLocals) {
+      var newLocals = {};
+      for (var key in locals) {
+        newLocals[key] = locals[key];
+      }
+      if (additionalLocals) {
+        for (var key in additionalLocals) {
+          newLocals[key] = additionalLocals[key];
+        }
+      }
+      return render.call(this, newLocals);
+    }
+    newRender.locals = setLocals;
+    return newRender;
+  };;
+  return fn;
+}(typeof React !== "undefined" ? React : require(".//Users/vladimir/projects/nci/node_modules/gulp-react-jade-amd/node_modules/react/react.js")));});

static/js/templates/app/components/projects/item.js

@@ -0,0 +1,33 @@
+define(['react'], function(React) {return (function (React) {
+  var fn = function(locals) {
+    var tags = [];
+    var locals_for_with = locals || {};
+    (function(item) {
+      tags.push(React.createElement("h1", {}, item.name));
+    }).call(this, "item" in locals_for_with ? locals_for_with.item : typeof item !== "undefined" ? item : undefined);
+    if (tags.length === 1 && !Array.isArray(tags[0])) {
+      return tags.pop();
+    }
+    tags.unshift("div", null);
+    return React.createElement.apply(React, tags);
+  };
+  
+  fn.locals = function setLocals(locals) {
+    var render = this;
+    function newRender(additionalLocals) {
+      var newLocals = {};
+      for (var key in locals) {
+        newLocals[key] = locals[key];
+      }
+      if (additionalLocals) {
+        for (var key in additionalLocals) {
+          newLocals[key] = additionalLocals[key];
+        }
+      }
+      return render.call(this, newLocals);
+    }
+    newRender.locals = setLocals;
+    return newRender;
+  };;
+  return fn;
+}(typeof React !== "undefined" ? React : require(".//Users/vladimir/projects/nci/node_modules/gulp-react-jade-amd/node_modules/react/react.js")));});

static/js/templates/app/components/projects/list.js

@@ -0,0 +1,58 @@
+define(['react'], function(React) {return (function (React) {
+  var fn = function(locals) {
+    var tags = [];
+    var locals_for_with = locals || {};
+    (function(Item, console, items) {
+      tags.push(React.createElement.apply(React, [ "div", {} ].concat(function() {
+        var tags = [];
+        tags.push(React.createElement("h2", {}, "projects list"));
+        console.log(this);
+        tags.push(function() {
+          var tags = [];
+          var $$obj = items;
+          if ("number" == typeof $$obj.length) for (var $index = 0, $$l = $$obj.length; $$l > $index; $index++) {
+            var project = $$obj[$index];
+            tags.push(React.createElement(Item, {
+              item: project
+            }));
+          } else {
+            var $$l = 0;
+            for (var $index in $$obj) {
+              $$l++;
+              var project = $$obj[$index];
+              tags.push(React.createElement(Item, {
+                item: project
+              }));
+            }
+          }
+          return tags;
+        }.call(this));
+        return tags;
+      }.call(this))));
+    }).call(this, "Item" in locals_for_with ? locals_for_with.Item : typeof Item !== "undefined" ? Item : undefined, "console" in locals_for_with ? locals_for_with.console : typeof console !== "undefined" ? console : undefined, "items" in locals_for_with ? locals_for_with.items : typeof items !== "undefined" ? items : undefined);
+    if (tags.length === 1 && !Array.isArray(tags[0])) {
+      return tags.pop();
+    }
+    tags.unshift("div", null);
+    return React.createElement.apply(React, tags);
+  };
+  
+  fn.locals = function setLocals(locals) {
+    var render = this;
+    function newRender(additionalLocals) {
+      var newLocals = {};
+      for (var key in locals) {
+        newLocals[key] = locals[key];
+      }
+      if (additionalLocals) {
+        for (var key in additionalLocals) {
+          newLocals[key] = additionalLocals[key];
+        }
+      }
+      return render.call(this, newLocals);
+    }
+    newRender.locals = setLocals;
+    return newRender;
+  };;
+  return fn;
+}(typeof React !== "undefined" ? React : require(".//Users/vladimir/projects/nci/node_modules/gulp-react-jade-amd/node_modules/react/react.js")));});

static/js/templates/app/index.js

@@ -0,0 +1,33 @@
+define(['react'], function(React) {return (function (React) {
+  var fn = function(locals) {
+    var tags = [];
+    var locals_for_with = locals || {};
+    (function(App) {
+      tags.push(React.createElement("div", {}, React.createElement(App, {})));
+    }).call(this, "App" in locals_for_with ? locals_for_with.App : typeof App !== "undefined" ? App : undefined);
+    if (tags.length === 1 && !Array.isArray(tags[0])) {
+      return tags.pop();
+    }
+    tags.unshift("div", null);
+    return React.createElement.apply(React, tags);
+  };
+  
+  fn.locals = function setLocals(locals) {
+    var render = this;
+    function newRender(additionalLocals) {
+      var newLocals = {};
+      for (var key in locals) {
+        newLocals[key] = locals[key];
+      }
+      if (additionalLocals) {
+        for (var key in additionalLocals) {
+          newLocals[key] = additionalLocals[key];
+        }
+      }
+      return render.call(this, newLocals);
+    }
+    newRender.locals = setLocals;
+    return newRender;
+  };;
+  return fn;
+}(typeof React !== "undefined" ? React : require(".//Users/vladimir/projects/nci/node_modules/gulp-react-jade-amd/node_modules/react/react.js")));});

views/index.jade

@@ -22,3 +22,5 @@ html
 
 
 		#content
+
+		#react-content