basic Porch app framework

.gitignore

@@ -1,3 +1,5 @@
+/dist/
+
 # Logs
 logs
 *.log
@@ -13,9 +15,6 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 

.jshintrc

@@ -0,0 +1,96 @@
+
+{
+    // JSHint Default Configuration File (as on JSHint website)
+    // See http://jshint.com/docs/ for more details
+
+    "maxerr"        : 50,       // {int} Maximum error before stopping
+
+    // Enforcing
+    "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
+    "camelcase"     : false,    // true: Identifiers must be in camelCase
+    "curly"         : true,     // true: Require {} for every new block or scope
+    "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
+    "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
+    "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
+    "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
+    "indent"        : 4,        // {int} Number of spaces to use for indentation
+    "latedef"       : false,    // true: Require variables/functions to be defined before being used
+    "newcap"        : false,    // true: Require capitalization of all constructor functions e.g. `new F()`
+    "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
+    "noempty"       : true,     // true: Prohibit use of empty blocks
+    "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
+    "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
+    "plusplus"      : false,    // true: Prohibit use of `++` & `--`
+    "quotmark"      : false,    // Quotation mark consistency:
+                                //   false    : do nothing (default)
+                                //   true     : ensure whatever is used is consistent
+                                //   "single" : require single quotes
+                                //   "double" : require double quotes
+    "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
+    "unused"        : true,     // true: Require all defined variables be used
+    "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
+    "maxparams"     : false,    // {int} Max number of formal params allowed per function
+    "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
+    "maxstatements" : false,    // {int} Max number statements per function
+    "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
+    "maxlen"        : false,    // {int} Max number of characters per line
+
+    // Relaxing
+    "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
+    "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
+    "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
+    "eqnull"        : false,     // true: Tolerate use of `== null`
+    "es5"           : false,     // true: Allow ES5 syntax (ex: getters and setters)
+    "esnext"        : true,      // true: Allow ES.next (ES6) syntax (ex: `const`)
+    "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
+                                 // (ex: `for each`, multiple try/catch, function expression…)
+    "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
+    "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
+    "funcscope"     : false,     // true: Tolerate defining variables inside control statements
+    "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
+    "iterator"      : false,     // true: Tolerate using the `__iterator__` property
+    "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
+    "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
+    "laxcomma"      : false,     // true: Tolerate comma-first style coding
+    "loopfunc"      : false,     // true: Tolerate functions being defined in loops
+    "multistr"      : false,     // true: Tolerate multi-line strings
+    "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
+    "notypeof"      : false,     // true: Tolerate invalid typeof operator values
+    "proto"         : false,     // true: Tolerate using the `__proto__` property
+    "scripturl"     : false,     // true: Tolerate script-targeted URLs
+    "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
+    "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
+    "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
+    "validthis"     : false,     // true: Tolerate using this in a non-constructor function
+
+    // Environments
+    "browser"       : true,     // Web Browser (window, document, etc)
+    "browserify"    : false,    // Browserify (node.js code in the browser)
+    "couch"         : false,    // CouchDB
+    "devel"         : true,     // Development/debugging (alert, confirm, etc)
+    "dojo"          : false,    // Dojo Toolkit
+    "jasmine"       : false,    // Jasmine
+    "jquery"        : false,    // jQuery
+    "mocha"         : true,     // Mocha
+    "mootools"      : false,    // MooTools
+    "node"          : true,     // Node.js
+    "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
+    "prototypejs"   : false,    // Prototype and Scriptaculous
+    "qunit"         : false,    // QUnit
+    "rhino"         : false,    // Rhino
+    "shelljs"       : false,     // ShellJS
+    "worker"        : false,    // Web Workers
+    "wsh"           : false,    // Windows Scripting Host
+    "yui"           : false,    // Yahoo User Interface
+
+    // Custom Globals
+    "globals" : {
+      "module"      : true,
+      "require"     : true,
+      "Promise"     : true,
+      "jest"        : true,
+      "expect"      : true,
+      "__ROOT__"    : true,
+      "supertest"   : true
+    }
+}

README.md

@@ -1,2 +1,10 @@
-# isomorphic-porch-demo
-Isomorphic React+Flux application architecture w Fluxible
+# isomorphic-porch
+
+Isomorphic React + Flux demo application
+
+## Tools and libraries
+ - [fluxible](http://fluxible.io) Yahoo's open-source implementation of an isomorphic Flux architecture. Makes use of plugins wrapping their lower level libraries, below:
+  - [dispatchr](https://github.com/yahoo/dispatchr)
+  - [routr](https://github.com/yahoo/routr)
+  - [fetchr](https://github.com/yahoo/fetchr)
+

gulp/config.js

@@ -0,0 +1,34 @@
+module.exports = {
+  // our js files for linting
+  jsFiles: [
+      './src/**/*.js',
+      './server/**/*.js',
+      './gulp/**/*.js',
+      '!server/index.js'
+  ],
+  jsxFiles: [
+      './src/**/*.jsx'
+  ],
+  less: {
+    src: [
+      './src/app.less'
+    ],
+    lessFiles: [
+      './src/**/*.less'
+    ],
+    dest: './dist'
+  },
+  browserify: {
+    // Enable source maps
+    debug: true,
+    // Additional file extentions to make optional
+    extensions: ['.jsx'],
+    // A separate bundle will be generated for each
+    // bundle config in the list below
+    bundleConfigs: [{
+      entries: './src/client.js',
+      dest: './dist',
+      outputName: 'bundle.js'
+    }]
+  }
+};

gulp/tasks/browserify.js

@@ -0,0 +1,83 @@
+/* browserify task
+   ---------------
+   Bundle javascripty things with browserify!
+
+   This task is set up to generate multiple separate bundles, from
+   different sources, and to use Watchify when run from the default task.
+
+   See browserify.bundleConfigs in gulp/config.js
+*/
+
+"use strict";
+
+var browserify   = require('browserify');
+var bundleLogger = require('../util/bundle-logger');
+var gulp         = require('gulp');
+var sourcemaps   = require('gulp-sourcemaps');
+var handleErrors = require('../util/handle-errors');
+var source       = require('vinyl-source-stream');
+var buffer       = require('vinyl-buffer');
+var config       = require('../config').browserify;
+var path         = require('path');
+
+gulp.task('browserify', function(callback) {
+
+  var bundleQueue = config.bundleConfigs.length;
+
+  var browserifyThis = function(bundleConfig) {
+
+    var bundler = browserify({
+      // Required watchify args
+      cache: {}, packageCache: {}, fullPaths: false,
+      // Specify the entry point of your app
+      entries: bundleConfig.entries,
+      // Add file extentions to make optional in your requires
+      extensions: config.extensions,
+      // Enable source maps!
+      debug: true,
+      // Search path to resolve absolute paths in require statements
+      paths: [path.resolve(__dirname, '../../src')],
+      basedir: path.resolve(__dirname, '../..')
+    });
+
+    var bundle = function() {
+      // Log when bundling starts
+      bundleLogger.start(bundleConfig.outputName);
+
+      bundler
+        .bundle()
+        // Use vinyl-source-stream to make the
+        // stream gulp compatible. Specifiy the
+        // desired output filename here.
+        .pipe(source(bundleConfig.outputName))
+        // Uglify doesn't support streams, so buffer
+        .pipe(buffer())
+        .pipe(sourcemaps.init({loadMaps: true}))
+        .pipe(sourcemaps.write('./', {sourceRoot: '/'}))
+        // Specify the output destination
+        .pipe(gulp.dest(bundleConfig.dest))
+        // Report compile errors
+        .on('error', handleErrors)
+        .on('end', reportFinished);
+    };
+
+    var reportFinished = function() {
+      // Log when bundling completes
+      bundleLogger.end(bundleConfig.outputName);
+
+      if (bundleQueue) {
+        bundleQueue--;
+        if (bundleQueue === 0) {
+          // If queue is empty, tell gulp the task is complete.
+          // https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
+          callback();
+        }
+      }
+    };
+
+    return bundle();
+  };
+
+  config.bundleConfigs.forEach(browserifyThis);
+
+});

gulp/tasks/build.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('build', ['lint', 'browserify', 'less']);

gulp/tasks/clean.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var gulp = require('gulp');
+var del = require('del');
+
+gulp.task('clean', function(callback) {
+  del(['dist/**'], callback);
+});

gulp/tasks/default.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('default', ['clean', 'build']);

gulp/tasks/less.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var handleErrors = require('../util/handle-errors');
+var gulp         = require('gulp');
+var sourcemaps   = require('gulp-sourcemaps');
+var concat       = require('gulp-concat');
+var less         = require('gulp-less');
+var postcss      = require('gulp-postcss');
+var autoprefixer = require('autoprefixer-core');
+var mqpacker     = require('css-mqpacker');
+var csswring     = require('csswring');
+var config       = require('../config.js').less;
+
+gulp.task('less', [], function () {
+
+    var useUglify = (process.env.NODE_ENV && process.env.NODE_ENV !== 'development');
+
+    var postProcessors = [
+            autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'ie 8', 'ie 9'], cascade: false}),
+            mqpacker
+        ];
+    if (useUglify) {
+        postProcessors.push(csswring);
+    }
+
+    var stream = gulp.src(config.src)
+        .pipe(sourcemaps.init())
+        .pipe(less())
+        .pipe(concat('app.css'))
+        .pipe(postcss(postProcessors))
+        .pipe(sourcemaps.write('.', {sourceRoot: '/src'}))
+        .pipe(gulp.dest(config.dest))
+        .on('error', handleErrors);
+
+    return stream;    
+});

gulp/tasks/lint-js.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var config = require('../config');
+var gulp = require('gulp');
+var jshint = require('gulp-jshint');
+var react = require('gulp-react');
+var reporter = 'jshint-stylish';
+
+gulp.task('lintJs', function() { 
+    return gulp.src(config.jsFiles)
+        .pipe(react())
+        .on('error', function(e) {
+            console.error(e.message + '\n  in ' + e.fileName);
+        })
+        .pipe(jshint('.jshintrc'))
+        .pipe(jshint.reporter(reporter))
+        .pipe(jshint.reporter('fail'));
+});

gulp/tasks/lint.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('lint', ['lintJs']);

gulp/tasks/set-watch.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var gulp = require('gulp');
+
+gulp.task('setWatch', function() {
+  global.isWatching = true;
+});

gulp/tasks/watch.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var gulp  = require('gulp');
+var config= require('../config');
+var supervisor = require('gulp-supervisor');
+var clc = require('cli-color');
+var watch = require('gulp-watch');
+var batch = require('gulp-batch');
+
+
+function batchTask(task) {
+    return batch(function () {
+        console.log("RUNNING TASK: " + task);
+        gulp.start(task);
+    });
+}
+
+gulp.task('watch', ['build', 'setWatch'], function() {
+
+  // be nice to new folks, let them know why this may be failing
+  if(typeof(process.env.NODE_ENV) === 'undefined'){
+  	console.log(clc.red("NODE_ENV is not set! ") + "You should probably add an environment variable named NODE_ENV and " +
+    "set to 'development'");
+  	return;
+  }
+
+  watch(config.jsFiles, batchTask('lint'));
+  watch(config.images.src, batchTask('images'));
+  watch(config.less.lessFiles, batchTask('less'));
+  watch(config.jsxFiles, batchTask('browserify'));
+
+
+  supervisor( 'server', {
+    watch: 'server',
+    pollInterval: 200
+  });
+
+
+});

gulp/util/bundle-logger.js

@@ -0,0 +1,23 @@
+/* bundleLogger
+   ------------
+   Provides gulp style logs to the bundle method in browserify.js
+*/
+
+"use strict";
+
+var gutil        = require('gulp-util');
+var prettyHrtime = require('pretty-hrtime');
+var startTime;
+
+module.exports = {
+  start: function(filepath) {
+    startTime = process.hrtime();
+    gutil.log('Bundling', gutil.colors.green(filepath) + '...');
+  },
+
+  end: function(filepath) {
+    var taskTime = process.hrtime(startTime);
+    var prettyTime = prettyHrtime(taskTime);
+    gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime));
+  }
+};