Basic conversion: browserified web app now works.

1 files changed, 208 insertions, 112 deletions

diff --git a/web/gulpfile.js b/web/gulpfile.js
index 5a0b93af..60f0f1b7 100644
--- a/web/gulpfile.js
+++ b/web/gulpfile.js
@@ -1,179 +1,275 @@
 var gulp = require("gulp");
-var merge = require('merge-stream');
+var path = require('path');
+var _ = require('lodash');
 
+var browserify = require('browserify');
 var concat = require('gulp-concat');
+var connect = require('gulp-connect');
+var buffer = require('vinyl-buffer');
 var jshint = require("gulp-jshint");
 var less = require("gulp-less");
 var livereload = require("gulp-livereload");
+var map = require("map-stream");
 var minifyCSS = require('gulp-minify-css');
 var notify = require("gulp-notify");
-var peg = require("gulp-peg");
 var plumber = require("gulp-plumber");
-var qunit = require("gulp-qunit");
+var rev = require("gulp-rev");
 var react = require("gulp-react");
+var reactify = require('reactify');
 var rename = require("gulp-rename");
+var replace = require('gulp-replace');
+var source = require('vinyl-source-stream');
 var sourcemaps = require('gulp-sourcemaps');
+var transform = require('vinyl-transform');
 var uglify = require('gulp-uglify');
 
+var packagejs = require('./package.json');
 
-var dont_break_on_errors = function () {
-    return plumber(function (error) {
-        notify.onError("<%= error.message %>").apply(this, arguments);
-        this.emit('end');
-    });
+
+// FIXME: react-with-addons.min.js for prod use issue
+
+var manifest = {
+    "vendor.css": "vendor.css",
+    "app.css": "app.css",
+    "vendor.js": "vendor.js",
+    "app.js": "app.js",
 };
 
-var path = {
-    dist: "../libmproxy/web/",
+var CONF = {
+    dist: "../libmproxy/web",
+    static: "../libmproxy/web/static",
     js: {
-        vendor: [
-            'vendor/jquery/jquery.js',
-            'vendor/lodash/lodash.js',
-            'vendor/react/react-with-addons.js',
-            'vendor/react-router/react-router.js',
+        // Don't package these in the vendor distribution
+        vendor_excludes: [
+            "bootstrap"
         ],
-        app: [
-            'js/utils.js',
-            'js/dispatcher.js',
-            'js/actions.js',
-            'js/filt/filt.js',
-            'js/flow/utils.js',
-            'js/store/store.js',
-            'js/store/view.js',
-            'js/connection.js',
-            'js/components/utils.jsx.js',
-            'js/components/virtualscroll.jsx.js',
-            'js/components/header.jsx.js',
-            'js/components/flowtable-columns.jsx.js',
-            'js/components/flowtable.jsx.js',
-            'js/components/flowdetail.jsx.js',
-            'js/components/mainview.jsx.js',
-            'js/components/eventlog.jsx.js',
-            'js/components/footer.jsx.js',
-            'js/components/proxyapp.jsx.js',
-            'js/app.js',
+        // Package these as well as the dependencies
+        vendor_includes: [
+            "react/addons"
         ],
+        app: 'src/js/app.js'
     },
-    peg: "js/filt/filt.pegjs",
     css: {
-        vendor: ["css/vendor.less"],
-        app: ["css/app.less"],
-        all: ["css/**"]
+        vendor: ["src/css/vendor.less"],
+        app: ["src/css/app.less"]
     },
-    vendor: ["vendor/**"],
-    fonts: ["src/vendor/fontawesome/fontawesome-webfont.*"],
-    html: ["*.html", "!benchmark.html", "!test.html"],
-    images: ["images/**"],
-    test: ["test.html"],
-    opts: {base: "src", cwd: "src"}
+    copy: [
+        "src/examples/**",
+        "src/fonts/**",
+    ],
+    templates: [
+        "src/templates/*"
+    ],
+    fonts: ["src/fontawesome/fontawesome-webfont.*"],
+    port: 8082
+};
+
+var vendor_packages = _.difference(
+        _.union(
+            _.keys(packagejs.dependencies),
+            CONF.js.vendor_includes
+        ),
+        CONF.js.vendor_excludes
+    );
+
+
+// Custom linting reporter used for error notify
+var jsHintErrorReporter = function(){ 
+    return map(function (file, cb) {
+        if (file.jshint && !file.jshint.success) {
+            file.jshint.results.forEach(function (err) {
+                if (err) {
+                    var msg = [
+                        path.basename(file.path),
+                        'Line: ' + err.error.line,
+                        'Reason: ' + err.error.reason
+                    ];
+                    notify.onError(
+                        "Error: <%= error.message %>"
+                    )(new Error(msg.join("\n")));
+                }
+            });
+        }
+        cb(null, file);
+    })
+};
+
+var save_rev = function(){
+    return map(function(file, callback){
+        if (file.revOrigBase){
+            manifest[path.basename(file.revOrigPath)] = path.basename(file.path);
+        }
+        callback(null, file);
+    })
+}
+
+var dont_break_on_errors = function(){
+    return plumber(
+        function(error){
+            notify.onError("Error: <%= error.message %>").apply(this, arguments);
+            this.emit('end');
+        }
+    );
 };
 
 
 gulp.task("fonts", function () {
-    return gulp.src(path.fonts)
-        .pipe(gulp.dest(path.dist + "static/fonts"));
+    return gulp.src(CONF.fonts)
+        .pipe(gulp.dest(CONF.dist + "fonts"));
 });
 
 
 function styles_dev(files) {
-    return (gulp.src(files, path.opts)
+    return (gulp.src(files)
         .pipe(dont_break_on_errors())
         .pipe(sourcemaps.init())
         .pipe(less())
         .pipe(sourcemaps.write(".", {sourceRoot: "/static"}))
-        .pipe(gulp.dest(path.dist + "static"))
-        .pipe(livereload({auto: false})));
+        .pipe(gulp.dest(CONF.static))
+        .pipe(livereload({ auto: false })));
 }
-gulp.task("styles-app-dev", styles_dev.bind(undefined, path.css.app));
-gulp.task("styles-vendor-dev", styles_dev.bind(undefined, path.css.vendor));
-gulp.task("styles-dev", ["styles-app-dev", "styles-vendor-dev"]);
+gulp.task("styles-app-dev", function(){
+    styles_dev(CONF.css.app);
+}); 
+gulp.task("styles-vendor-dev", function(){
+    styles_dev(CONF.css.vendor);
+}); 
 
 
 function styles_prod(files) {
-    return (gulp.src(files, path.opts)
+    return (gulp.src(files)
         .pipe(less())
         // No sourcemaps support yet :-/
         // https://github.com/jonathanepollack/gulp-minify-css/issues/34
         .pipe(minifyCSS())
-        .pipe(gulp.dest(path.dist + "static"))
-        .pipe(livereload({auto: false})));
+        .pipe(rev())
+        .pipe(save_rev())
+        .pipe(gulp.dest(CONF.static))
+        .pipe(livereload({ auto: false })));
 }
-gulp.task("styles-app-prod", styles_prod.bind(undefined, path.css.app));
-gulp.task("styles-vendor-prod", styles_prod.bind(undefined, path.css.vendor));
-gulp.task("styles-prod", ["styles-app-prod", "styles-vendor-prod"]);
+gulp.task("styles-app-prod", function(){
+    styles_prod(CONF.css.app);
+}); 
+gulp.task("styles-vendor-prod", function(){
+    styles_prod(CONF.css.vendor);
+}); 
 
 
-function scripts_dev(files, filename) {
-    return gulp.src(files, path.opts)
-        .pipe(dont_break_on_errors())
-        .pipe(sourcemaps.init())
-        .pipe(react())
-        .pipe(concat(filename))
-        .pipe(sourcemaps.write(".", {sourceRoot: "/static"}))
-        .pipe(gulp.dest(path.dist + "static/js"))
-        .pipe(livereload({auto: false}));
+function vendor_stream(debug){
+    var vendor = browserify(vendor_packages, {debug: debug});
+    _.each(vendor_packages, function(v){
+        vendor.require(v);
+    });
+    return vendor.bundle()
+        .pipe(source("dummy.js"))
+        .pipe(rename("vendor.js"));
 }
-gulp.task("scripts-app-dev", scripts_dev.bind(undefined, path.js.app, "app.js"));
-gulp.task("scripts-vendor-dev", scripts_dev.bind(undefined, path.js.vendor, "vendor.js"));
-gulp.task("scripts-dev", ["scripts-app-dev", "scripts-vendor-dev"]);
+gulp.task("scripts-vendor-dev", function (){
+    return vendor_stream(true)
+        .pipe(gulp.dest(CONF.static));
+});
+gulp.task("scripts-vendor-prod", function(){
+    return vendor_stream(false)
+        .pipe(buffer())
+        .pipe(uglify())
+        .pipe(rev())
+        .pipe(save_rev())
+        .pipe(gulp.dest(CONF.static));
+});
 
 
-function scripts_prod(files, filename) {
-    return gulp.src(files, path.opts)
-        .pipe(react())
-        .pipe(concat(filename))
+function app_stream(debug) {
+    var browserified = transform(function(filename) {
+        var b = browserify(filename, {debug: debug})
+        _.each(vendor_packages, function(v){
+            b.external(v);
+        });
+        b.transform(reactify);
+        return b.bundle();
+    });
+    return gulp.src([CONF.js.app])
+        .pipe(dont_break_on_errors())
+        .pipe(browserified)
+        .pipe(rename("app.js"));
+};
+gulp.task('scripts-app-dev', function () {
+    return app_stream(true)
+        .pipe(gulp.dest(CONF.static))
+        .pipe(livereload({ auto: false }));
+});
+gulp.task('scripts-app-prod', function () {
+    return app_stream(true)
+        .pipe(buffer())
         .pipe(uglify())
-        .pipe(gulp.dest(path.dist + "static/js"))
-        .pipe(livereload({auto: false}));
-}
-gulp.task("scripts-app-prod", scripts_prod.bind(undefined, path.js.app, "app.js"));
-gulp.task("scripts-vendor-prod", scripts_prod.bind(undefined, path.js.vendor, "vendor.js"));
-gulp.task("scripts-prod", ["scripts-app-prod", "scripts-vendor-prod"]);
+        .pipe(rev())
+        .pipe(save_rev())
+        .pipe(gulp.dest(CONF.static));
+});
 
 
 gulp.task("jshint", function () {
-    return gulp.src(path.js.app.concat(["!"+path.peg.replace("pegjs","js")]), path.opts)
+    return gulp.src(["src/js/**.js"])
         .pipe(dont_break_on_errors())
         .pipe(react())
+        .pipe(plumber())
         .pipe(jshint())
-        .pipe(jshint.reporter("jshint-stylish"));
-});
-
-gulp.task("peg", function () {
-    return gulp.src(path.peg, path.opts)
-        .pipe(dont_break_on_errors())
-        .pipe(peg({exportVar:"Filt"}))
-        .pipe(gulp.dest(".", path.opts));
+        .pipe(jshint.reporter("jshint-stylish"))
+        .pipe(jsHintErrorReporter());
 });
 
-gulp.task("images", function () {
-    //(spriting code in commit 4ca720b55680e40b3a4361141a2ad39f9de81111)
-    return gulp.src(path.images, path.opts)
-        .pipe(gulp.dest(path.dist + "static"));
+gulp.task("copy", function(){
+    return gulp.src(CONF.copy, {base:"src/"})
+        .pipe(gulp.dest(CONF.dist));
 });
 
-gulp.task("html", function () {
-    return gulp.src(path.html, path.opts)
-        .pipe(gulp.dest(path.dist + "templates"))
-        .pipe(livereload({auto: false}));
-});
+function templates(){
+    return gulp.src(CONF.templates, {base:"src/"})
+        .pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
+            return manifest[p1];
+        })) 
+        .pipe(gulp.dest(CONF.dist));
+};
+gulp.task('templates', templates);
 
 
-gulp.task('test', function () {
-    return gulp.src(path.test, path.opts)
-        .pipe(qunit({verbose: true}));
+gulp.task('connect', function() {
+    connect.server({
+        port: CONF.port
+    });
 });
 
+common = ["fonts", "copy"];
+gulp.task(
+    "dev",
+    [
+        "fonts",
+        "copy",
+        "styles-vendor-dev",
+        "styles-app-dev",
+        "scripts-vendor-dev",
+        "scripts-app-dev",
+    ],
+    templates
+);
+gulp.task(
+    "prod", 
+    [
+        "fonts",
+        "copy",
+        "styles-vendor-prod",
+        "styles-app-prod",
+        "scripts-vendor-prod",
+        "scripts-app-prod",
+        "connect"
+    ],
+    templates
+);
 
-common = ["fonts", "html", "jshint", "peg", "images"];
-gulp.task("dev", common.concat(["styles-dev", "scripts-dev"]));
-gulp.task("prod", common.concat(["styles-prod", "scripts-prod"]));
-
-gulp.task("default", ["dev"], function () {
+gulp.task("default", ["dev", "connect"], function () {
     livereload.listen({auto: true});
-    gulp.watch(path.vendor, path.opts, ["scripts-vendor-dev", "styles-vendor-dev"]);
-    gulp.watch(path.js.app, path.opts, ["scripts-app-dev", "jshint"]);
-    gulp.watch(path.peg, path.opts, ["peg"]);
-    gulp.watch(path.css.all, path.opts, ["styles-app-dev"]);
-    gulp.watch(path.html, path.opts, ["html"]);
+    gulp.watch(["src/css/vendor*"], ["styles-vendor-dev"]);
+    gulp.watch(["src/js/**"], ["scripts-app-dev", "jshint"]);
+    gulp.watch(["src/css/**"], ["styles-app-dev"]);
+    gulp.watch(CONF.templates, ["templates"]);
+    gulp.watch(CONF.copy, ["copy"]);
 });