With updated deps

README.md

@@ -1,4 +1,40 @@
-react-flux-boilerplate
-======================
+## React FLUX Boilerplate
 
-A boilerplate for a full FLUX architecture
+Based on the architecture suggestions from Facebook, this boilerplate will help you deal with it. It has included the
+react-flux-dispatcher and react-flux-store. Read more about FLUX over at [Facebook Flux](http://facebook.github.io/flux/) and I wrote a post about it too: [React JS and FLUX](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html).
+
+### How to use
+
+* Clone the repo
+* Run `npm install`
+* Open `dev/index.html` or run `python -m SimpleHTTPServer` in the `dev` folder
+
+### Development
+* Run `gulp`
+* Any changes to `app` or `styles` folder will automatically rebuild to `dev` folder
+
+### Tests
+* Run `gulp test -'./tests/App-test.js'
+* Open `test.html`
+* Any changes done to the test file or files in `app` folder will autoreload the browser
+
+### Run all tests with Karma
+* Run `npm test`
+
+Karma will launch Chrome and run the tests once. If you need to run tests on a server with
+PhantomJS, either change `karma.conf.js` to use PhantomJS or manually start it with:
+`./node_modules/karma/bin/karma start --single-run --browsers PhantomJS`
+
+### Minify the code, ready for production
+* Run `gulp deploy`
+
+### Directory
+* **app/**: Where you develop the application
+* **dev/**: Where your automatically builds to. This is where you launch your app in development
+* **dist/**: Where the deployed code exists, ready for production
+* **utils/**: Gulp tasks and other utils
+* **styles/**: Where you put your css files
+* **tests/**: Where you put your test files
+* **gulpfile**: Gulp configuration
+* **karma.conf.js**: Karma configuration
+* **test.html**: Open when running specific test files

app/App.js

@@ -0,0 +1,18 @@
+/** @jsx React.DOM */
+var React = require('flux-react');
+var Checkboxes = require('./components/Checkboxes.js');
+var NameThrower = require('./components/NameThrower.js');
+	
+var App = React.createClass({
+	render: function() {
+		return (
+			<div>
+				<h1>Hello world!</h1>
+				<Checkboxes/>
+				<NameThrower/>
+			</div>
+		);
+	}
+});
+	
+module.exports = App;

app/Constants.js

@@ -0,0 +1,3 @@
+module.exports = {
+	EVENT_CHANGE: 'change'
+};

app/actions/CheckboxActions.js

@@ -0,0 +1,5 @@
+module.exports = {
+	'CHECK_ALL': 'check all',
+	'UNCHECK_ALL': 'uncheck all',
+	'CHECK': 'check' 
+};

app/components/Checkboxes.js

@@ -0,0 +1,51 @@
+/** @jsx React.DOM */
+var React = require('flux-react');
+var Constants = require('../Constants.js');
+var ColoredCheckbox = require('./Checkboxes/ColoredCheckbox.js');
+var CheckboxActions = require('../actions/CheckboxActions.js');
+var CheckboxStore = require('../stores/CheckboxStore.js');
+
+var Checkboxes = React.createClass({
+	stores: [CheckboxStore],
+	getInitialState: function () {
+		return {
+			checkboxes: CheckboxStore.getCheckboxes()
+		};
+	},
+	storesDidUpdate: function () {
+		this.setState({
+			checkboxes: CheckboxStore.getCheckboxes()
+		});
+	},
+	check: function (color) {
+		React.dispatch({
+			type: CheckboxActions.CHECK,
+			color: color
+		})
+	},
+	checkAll: function () {
+		React.dispatch({
+			type: CheckboxActions.CHECK_ALL
+		});
+	},
+	uncheckAll: function () {
+		React.dispatch({
+			type: CheckboxActions.UNCHECK_ALL
+		});
+	},
+	render: function() {
+		var checkboxes = this.state.checkboxes.map(function (checkbox, index) {
+			return <ColoredCheckbox key={index} color={checkbox.color} checked={checkbox.checked} onChange={this.check}/>
+		}, this);
+		return (
+			<div>
+				{checkboxes}
+				<button onClick={this.checkAll}>Check all</button>
+				<button onClick={this.uncheckAll}>Uncheck all</button>
+			</div>
+		);
+	}
+	
+});
+	
+module.exports = Checkboxes;

app/components/Checkboxes/ColoredCheckbox.js

@@ -0,0 +1,21 @@
+/** @jsx React.DOM */
+var React = require('flux-react');
+	
+var ColoredCheckbox = React.createClass({
+	render: function() {
+		var style = {
+			backgroundColor: this.props.color,
+			padding: '5px'
+		};
+		return (
+			<span key={this.props.key} style={style}>
+				<input type="checkbox" 
+					onChange={this.props.onChange.bind(null, this.props.color)}
+					checked={this.props.checked}/>
+			</span>
+		);
+	}
+	
+});
+	
+module.exports = ColoredCheckbox;

app/components/NameThrower.js

@@ -0,0 +1,39 @@
+/** @jsx React.DOM */
+var React = require('flux-react');
+var Constants = require('../Constants.js');
+var CheckboxStore = require('../stores/CheckboxStore.js');
+	
+var NameThrower = React.createClass({
+	stores: [CheckboxStore],
+	getInitialState: function () {
+		return {
+			name: '',
+			colors: CheckboxStore.getColors()
+		};
+	},
+	storesDidUpdate: function () {
+		this.setState({
+			colors: CheckboxStore.getColors()
+		});
+	},
+	updateName: function () {
+		this.setState({
+			name: this.refs.input.getDOMNode().value
+		});
+	},
+	render: function() {
+		var names = this.state.colors.map(function (color, index) {
+			var style = {color: color};
+			return <div key={index} style={style}>{this.state.name}</div>
+		}, this);
+		return (
+			<div>
+				<input ref="input" type="text" value={this.state.name} onChange={this.updateName}/>
+				{names}
+			</div>
+		);
+	}
+	
+});
+	
+module.exports = NameThrower;

app/main.js

@@ -0,0 +1,6 @@
+/** @jsx React.DOM */
+var React = require('flux-react');
+React.debug();
+
+var App = require('./App.js');
+React.renderComponent(<App/>, document.body);

app/stores/CheckboxStore.js

@@ -0,0 +1,63 @@
+var React = require('flux-react');
+var merge = require('react/lib/merge');
+var CheckboxActions = require('../actions/CheckboxActions.js');
+var mergeInto = require('react/lib/mergeInto');
+var Constants = require('../Constants.js');
+
+var checkboxes = [{
+	color: 'red',
+	checked: false
+}, {
+	color: 'blue',
+	checked: false
+}, {
+	color: 'green',
+	checked: false
+}];
+
+var CheckboxStore = React.createStore({
+
+	getCheckboxes: function () {
+		return checkboxes.map(function (checkbox) {
+			var checkboxCopy = {};
+			mergeInto(checkboxCopy, checkbox); // Create a copy to make it impossible to mutate store
+			return checkboxCopy;
+		});
+	},
+	getColors: function () {
+		return checkboxes.map(function (checkbox) {
+			if (checkbox.checked) {
+				return checkbox.color;
+			} else {
+				return 'black';
+			}
+		});
+	},
+	dispatch: function (payload) {
+		switch (payload.type) {
+			case CheckboxActions.CHECK_ALL:
+			checkboxes.forEach(function (checkbox) {
+				checkbox.checked = true;
+			});
+			break;
+
+			case CheckboxActions.UNCHECK_ALL:
+			checkboxes.forEach(function (checkbox) {
+				checkbox.checked = false;
+			});
+			break;
+
+			case CheckboxActions.CHECK:
+			checkboxes.forEach(function (checkbox) {
+				if (checkbox.color === payload.color) {
+					checkbox.checked = !checkbox.checked;
+				}
+			});
+			break;
+		}
+		this.flush();
+	}
+
+});
+
+module.exports = CheckboxStore;

dev/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8"/>
+		<link rel="stylesheet" href="main.css"/>
+		<script>
+			window.DEBUG = true;
+		</script>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script src="main.js"></script>
+	</body>
+</html>

dev/main.css

@@ -0,0 +1,4 @@
+body {
+	background-color: #EAEAEA;
+	zoom: 150%;
+}

gulpfile.js

@@ -0,0 +1,49 @@
+// Gulp dependencies
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+
+var browserify = require('./utils/browserify.js'); 
+var css = require('./utils/css.js');
+
+var DEFAULT_OPTIONS = {
+	browserify: {
+		src: './app/main.js',
+		isTest: false,
+		dest: './dev/',
+		watch: true,
+		uglify: false
+	},
+	css: {
+		src: './styles/**/*.css',
+		dest: './dev/',
+		watch: true
+	}
+};
+
+gulp.task('browserify', function () {
+	return browserify(DEFAULT_OPTIONS.browserify);
+});
+
+gulp.task('css', function () {
+	return css(DEFAULT_OPTIONS.css);
+});
+
+gulp.task('default', ['browserify', 'css']);
+
+gulp.task('deploy', function () {
+	DEFAULT_OPTIONS.browserify.dest = './dist/';
+	DEFAULT_OPTIONS.browserify.watch = false;
+	DEFAULT_OPTIONS.browserify.uglify = true;
+	browserify(DEFAULT_OPTIONS.browserify);
+
+	DEFAULT_OPTIONS.css.dest = './dist/';
+	DEFAULT_OPTIONS.css.watch = false;
+	css(DEFAULT_OPTIONS.css);
+});
+
+gulp.task('test', function () {
+    var src = '.' + gutil.env[''][''];
+    DEFAULT_OPTIONS.browserify.src = src;
+    DEFAULT_OPTIONS.browserify.isTest = true;
+    return browserify(DEFAULT_OPTIONS.browserify);
+});

karma.conf.js

@@ -0,0 +1,73 @@
+module.exports = function(config) {
+    config.set({
+
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: '',
+
+
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['mocha', 'browserify'],
+
+
+        // list of files / patterns to load in the browser
+        files: [
+            'utils/es5-shim.js',
+            'tests/**/*.js'
+//      'server/**/*.js'
+        ],
+
+
+        // list of files to exclude
+        exclude: [
+        ],
+
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'tests/**/*.js': ['browserify']
+//      'server/**/*.js': ['browserify']
+        },
+
+
+        browserify: {
+            debug: true,
+            transform: [ 'reactify' ]
+        },
+
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress'],
+
+
+        // web server port
+        port: 9876,
+
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: false,
+
+
+        // start these browsers
+        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+        //browsers: ['Chrome', 'Firefox', 'PhantomJS'],
+        browsers: ['Chrome'],
+
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: true
+    });
+};

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "flux-react-boilerplate",
+  "version": "1.0.0",
+  "description": "React flux architecture boilerplate",
+  "main": "gulp",
+  "scripts": {
+    "test": "./node_modules/karma/bin/karma start karma.conf.js"
+  },
+  "author": "Christian Alfoni",
+  "license": "ISC",
+  "devDependencies": {
+    "browserify": "^5.9.3",
+    "chai": "^1.9.1",
+    "es6-promise": "^1.0.0",
+    "flux-react": "^1.1.2",
+    "gulp": "^3.8.7",
+    "gulp-concat": "^2.3.4",
+    "gulp-cssmin": "^0.1.6",
+    "gulp-if": "^1.2.4",
+    "gulp-livereload": "^2.1.0",
+    "gulp-notify": "^1.4.2",
+    "gulp-streamify": "0.0.5",
+    "gulp-uglify": "^0.3.1",
+    "gulp-util": "^3.0.0",
+    "karma": "^0.12.21",
+    "karma-bro": "^0.6.2",
+    "karma-chrome-launcher": "^0.1.4",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-mocha": "^0.1.7",
+    "karma-phantomjs-launcher": "^0.1.4",
+    "mocha": "^1.21.4",
+    "react": "^0.11.1",
+    "react-flux-dispatcher": "^1.0.0",
+    "react-flux-store": "^1.0.0",
+    "react-tools": "^0.11.1",
+    "reactify": "^0.14.0",
+    "vinyl-source-stream": "^0.1.1",
+    "watchify": "^1.0.2"
+  }
+}

styles/main.css

@@ -0,0 +1,4 @@
+body {
+	background-color: #EAEAEA;
+	zoom: 150%;
+}

test.html

@@ -0,0 +1,22 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Mocha Tests</title>
+  <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
+  <script src="node_modules/mocha/mocha.js"></script>
+  <script>mocha.setup('bdd')</script>
+  <script src="dev/test.js"></script>
+
+</head>
+<body>
+  <div id="mocha"></div>
+
+<script type="text/javascript">//<![CDATA[
+document.write('<script src="http://localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
+//]]></script>
+
+  <script>
+          mocha.run();
+  </script>
+</body>
+</html>

tests/App-test.js

@@ -0,0 +1,18 @@
+/** @jsx React.DOM */
+var expect = require('chai').expect;
+
+describe('App', function() {
+  it('has the text Hello world!', function() {
+    var React = require('react/addons');
+    var App = require('../app/App.js');
+    var TestUtils = React.addons.TestUtils;
+
+    var app = TestUtils.renderIntoDocument(
+      <App/>
+    );
+
+    var h1 = TestUtils.findRenderedDOMComponentWithTag(app, 'h1');
+
+    expect(h1.getDOMNode().textContent).to.equal('Hello world!');
+  });
+});

utils/browserify.js

@@ -0,0 +1,69 @@
+/** 
+  Use Browserify to bundle up our tests.
+
+  gulp test --watch --tests './tests/checkboxWithLabel-test.js'
+
+  Thanks to - http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/ 
+*/
+
+var gulp = require('gulp');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+var watchify = require('watchify');
+var reactify = require('reactify');
+var livereload = require('gulp-livereload');
+var gulpif = require('gulp-if');
+var path = require('path');
+var uglify = require('gulp-uglify');
+var streamify = require('gulp-streamify');
+var notify = require('gulp-notify');
+
+var handleError = require('./handleError');
+
+var getTimeStamp = function () {
+    var date = new Date();
+    var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+    var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+    return hours + ':' + minutes;
+};
+
+var runBrowserify = function (options) {
+
+    var bundler = browserify({
+        entries: [options.src],
+        transform: [reactify],
+        debug: true,
+        standalone: 'ReactDispatcher',
+        cache: {}, packageCache: {}, fullPaths: true
+    });
+    var rebundle = function() {
+        console.log('[' + getTimeStamp() + '] Building');
+        var start = Date.now();
+        var fileName = options.uglify ? 'ReactDispatcher.min.js' : path.basename(options.src);
+        bundler.bundle()
+        .on('error', handleError('Browserify'))
+        .pipe(source(options.isTest ? 'test.js' : fileName))
+        .pipe(gulpif(options.uglify, streamify(uglify())))
+        .pipe(gulp.dest(options.dest))
+        .pipe(gulpif(options.isTest, livereload()))
+        .pipe(notify(function () {
+            console.log('[' + getTimeStamp() + '] Built in ' + (Date.now() - start) + 'ms');
+        }));
+    };
+
+    if (options.isTest) {
+        livereload.listen();
+    }
+
+    if (options.watch) {
+        bundler = watchify(bundler);
+        bundler.on('update', rebundle);
+    }
+
+    bundler.transform(reactify);
+
+    return rebundle();
+
+};
+
+module.exports = runBrowserify;

utils/css.js

@@ -0,0 +1,24 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var cssmin = require('gulp-cssmin');
+
+var handleError = require('./handleError');
+
+var runCss = function (options) {
+
+    if (options.watch) {
+        return gulp.watch(options.src, function () {
+            return gulp.src(options.src)
+            .pipe(concat('main.css'))
+            .pipe(gulp.dest(options.dest));
+        });
+    } else {
+        return gulp.src(options.src)
+        .pipe(concat('main.css'))
+        .pipe(cssmin())
+        .pipe(gulp.dest(options.dest));   
+    }
+
+};
+
+module.exports = runCss;

utils/handleError.js

@@ -0,0 +1,12 @@
+var gutil = require('gulp-util');
+var notify = require('gulp-notify');
+
+module.exports = function (task) {
+    return function(err) {
+        gutil.log(gutil.colors.red(err));
+        notify.onError(task + ' failed, check the logs..')(err);
+
+        // Keep gulp or browserify from hanging on this task
+        this.emit('end');
+    };
+};