Add PEG support to gulpfile

- Extract conf - all project specific conf outside gulpfile
- Generalize filt.js exports, add required imports

web/conf.js

@@ -0,0 +1,33 @@
+
+var conf = {
+    src: "src/",
+    dist: "../libmproxy/web",
+    static: "../libmproxy/web/static",
+    js: {
+        // Don't package these in the vendor distribution
+        vendor_excludes: [
+            "bootstrap"
+        ],
+        // Package these as well as the dependencies
+        vendor_includes: [
+            "react/addons"
+        ],
+        app: 'src/js/app.js',
+        jshint: ["src/js/**.js", "!src/js/filt/filt.js"]
+    },
+    css: {
+        vendor: ["src/css/vendor.less"],
+        app: ["src/css/app.less"]
+    },
+    copy: [
+        "src/images/**",
+    ],
+    templates: [
+        "src/templates/*"
+    ],
+    fonts: ["src/fontawesome/fontawesome-webfont.*"],
+    peg: ["src/js/filt/filt.peg"],
+    port: 8082
+};
+
+module.exports = conf;

web/gulpfile.js

@@ -22,8 +22,11 @@ var source = require('vinyl-source-stream');
 var sourcemaps = require('gulp-sourcemaps');
 var transform = require('vinyl-transform');
 var uglify = require('gulp-uglify');
+var peg = require("gulp-peg");
+var filelog = require('gulp-filelog');
 
 var packagejs = require('./package.json');
+var conf = require('./conf.js');
 
 
 // FIXME: react-with-addons.min.js for prod use issue
@@ -35,41 +38,13 @@ var manifest = {
     "app.js": "app.js",
 };
 
-var CONF = {
-    dist: "../libmproxy/web",
-    static: "../libmproxy/web/static",
-    js: {
-        // Don't package these in the vendor distribution
-        vendor_excludes: [
-            "bootstrap"
-        ],
-        // Package these as well as the dependencies
-        vendor_includes: [
-            "react/addons"
-        ],
-        app: 'src/js/app.js'
-    },
-    css: {
-        vendor: ["src/css/vendor.less"],
-        app: ["src/css/app.less"]
-    },
-    copy: [
-        "src/images/**",
-    ],
-    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
-    );
+    _.union(
+        _.keys(packagejs.dependencies),
+        conf.js.vendor_includes
+    ),
+    conf.js.vendor_excludes
+);
 
 
 // Custom linting reporter used for error notify
@@ -113,8 +88,8 @@ var dont_break_on_errors = function(){
 
 
 gulp.task("fonts", function () {
-    return gulp.src(CONF.fonts)
-        .pipe(gulp.dest(CONF.dist + "fonts"));
+    return gulp.src(conf.fonts)
+        .pipe(gulp.dest(conf.dist + "fonts"));
 });
 
 
@@ -124,14 +99,14 @@ function styles_dev(files) {
         .pipe(sourcemaps.init())
         .pipe(less())
         .pipe(sourcemaps.write(".", {sourceRoot: "/static"}))
-        .pipe(gulp.dest(CONF.static))
+        .pipe(gulp.dest(conf.static))
         .pipe(livereload({ auto: false })));
 }
 gulp.task("styles-app-dev", function(){
-    styles_dev(CONF.css.app);
+    styles_dev(conf.css.app);
 }); 
 gulp.task("styles-vendor-dev", function(){
-    styles_dev(CONF.css.vendor);
+    styles_dev(conf.css.vendor);
 }); 
 
 
@@ -143,14 +118,14 @@ function styles_prod(files) {
         .pipe(minifyCSS())
         .pipe(rev())
         .pipe(save_rev())
-        .pipe(gulp.dest(CONF.static))
+        .pipe(gulp.dest(conf.static))
         .pipe(livereload({ auto: false })));
 }
 gulp.task("styles-app-prod", function(){
-    styles_prod(CONF.css.app);
+    styles_prod(conf.css.app);
 }); 
 gulp.task("styles-vendor-prod", function(){
-    styles_prod(CONF.css.vendor);
+    styles_prod(conf.css.vendor);
 }); 
 
 
@@ -165,7 +140,7 @@ function vendor_stream(debug){
 }
 gulp.task("scripts-vendor-dev", function (){
     return vendor_stream(true)
-        .pipe(gulp.dest(CONF.static));
+        .pipe(gulp.dest(conf.static));
 });
 gulp.task("scripts-vendor-prod", function(){
     return vendor_stream(false)
@@ -173,7 +148,7 @@ gulp.task("scripts-vendor-prod", function(){
         .pipe(uglify())
         .pipe(rev())
         .pipe(save_rev())
-        .pipe(gulp.dest(CONF.static));
+        .pipe(gulp.dest(conf.static));
 });
 
 
@@ -186,14 +161,14 @@ function app_stream(debug) {
         b.transform(reactify);
         return b.bundle();
     });
-    return gulp.src([CONF.js.app])
+    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(gulp.dest(conf.static))
         .pipe(livereload({ auto: false }));
 });
 gulp.task('scripts-app-prod', function () {
@@ -202,12 +177,12 @@ gulp.task('scripts-app-prod', function () {
         .pipe(uglify())
         .pipe(rev())
         .pipe(save_rev())
-        .pipe(gulp.dest(CONF.static));
+        .pipe(gulp.dest(conf.static));
 });
 
 
 gulp.task("jshint", function () {
-    return gulp.src(["src/js/**.js"])
+    return gulp.src(conf.js.jshint)
         .pipe(dont_break_on_errors())
         .pipe(react())
         .pipe(plumber())
@@ -217,27 +192,34 @@ gulp.task("jshint", function () {
 });
 
 gulp.task("copy", function(){
-    return gulp.src(CONF.copy, {base:"src/"})
-        .pipe(gulp.dest(CONF.dist));
+    return gulp.src(conf.copy, {base:"src/"})
+        .pipe(gulp.dest(conf.dist));
 });
 
 function templates(){
-    return gulp.src(CONF.templates, {base:"src/"})
+    return gulp.src(conf.templates, {base:"src/"})
         .pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
             return manifest[p1];
         })) 
-        .pipe(gulp.dest(CONF.dist));
+        .pipe(gulp.dest(conf.dist));
 };
 gulp.task('templates', templates);
 
 
+gulp.task("peg", function () {
+    return gulp.src(conf.peg, {base: "src/"})
+        .pipe(dont_break_on_errors())
+        .pipe(peg())
+        .pipe(filelog())
+        .pipe(gulp.dest("src/"));
+});
+
 gulp.task('connect', function() {
     connect.server({
-        port: CONF.port
+        port: conf.port
     });
 });
 
-common = ["fonts", "copy"];
 gulp.task(
     "dev",
     [
@@ -246,6 +228,7 @@ gulp.task(
         "styles-vendor-dev",
         "styles-app-dev",
         "scripts-vendor-dev",
+        "peg",
         "scripts-app-dev",
     ],
     templates
@@ -258,6 +241,7 @@ gulp.task(
         "styles-vendor-prod",
         "styles-app-prod",
         "scripts-vendor-prod",
+        "peg",
         "scripts-app-prod",
         "connect"
     ],
@@ -267,8 +251,9 @@ gulp.task(
 gulp.task("default", ["dev", "connect"], function () {
     livereload.listen({auto: true});
     gulp.watch(["src/css/vendor*"], ["styles-vendor-dev"]);
+    gulp.watch(conf.peg, ["peg", "scripts-app-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"]);
+    gulp.watch(conf.templates, ["templates"]);
+    gulp.watch(conf.copy, ["copy"]);
 });

web/src/js/app.js

@@ -12,4 +12,5 @@ $(function () {
     ReactRouter.run(proxyapp.routes, function (Handler) {
         React.render(<Handler/>, document.body);
     });
-});
+});
+

web/src/js/components/header.js

@@ -1,6 +1,9 @@
 var React = require("react");
 var $ = require("jquery");
 
+var Filt = require("../filt/filt.js");
+var utils = require("../utils.js");
+
 var common = require("./common.js");
 
 var FilterDocs = React.createClass({
@@ -105,7 +108,7 @@ var FilterInput = React.createClass({
         this.setState({mousefocus: false});
     },
     onKeyDown: function (e) {
-        if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) {
+        if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) {
             this.blur();
             // If closed using ESC/ENTER, hide the tooltip.
             this.setState({mousefocus: false});

web/src/js/filt/filt.js

@@ -1,5 +1,4 @@
-/* jshint ignore:start */
-Filt = (function() {
+module.exports = (function() {
   /*
    * Generated by PEG.js 0.8.0.
    *
@@ -1592,6 +1591,8 @@ Filt = (function() {
     }
 
 
+    var flowutils = require("../flow/utils.js");
+
     function or(first, second) {
         // Add explicit function names to ease debugging.
         function orFilter() {
@@ -1640,7 +1641,7 @@ Filt = (function() {
     ];
     function assetFilter(flow) {
         if (flow.response) {
-            var ct = ResponseUtils.getContentType(flow.response);
+            var ct = flowutils.ResponseUtils.getContentType(flow.response);
             var i = ASSET_TYPES.length;
             while (i--) {
                 if (ASSET_TYPES[i].test(ct)) {
@@ -1674,9 +1675,9 @@ Filt = (function() {
         regex = new RegExp(regex, "i");
         function headerFilter(flow){
             return (
-                (flow.request && RequestUtils.match_header(flow.request, regex))
+                (flow.request && flowutils.RequestUtils.match_header(flow.request, regex))
                 ||
-                (flow.response && ResponseUtils.match_header(flow.response, regex))
+                (flow.response && flowutils.ResponseUtils.match_header(flow.response, regex))
             );
         }
         headerFilter.desc = "header matches " + regex;
@@ -1685,7 +1686,7 @@ Filt = (function() {
     function requestHeader(regex){
         regex = new RegExp(regex, "i");
         function requestHeaderFilter(flow){
-            return (flow.request && RequestUtils.match_header(flow.request, regex));
+            return (flow.request && flowutils.RequestUtils.match_header(flow.request, regex));
         }
         requestHeaderFilter.desc = "req. header matches " + regex;
         return requestHeaderFilter;
@@ -1693,7 +1694,7 @@ Filt = (function() {
     function responseHeader(regex){
         regex = new RegExp(regex, "i");
         function responseHeaderFilter(flow){
-            return (flow.response && ResponseUtils.match_header(flow.response, regex));
+            return (flow.response && flowutils.ResponseUtils.match_header(flow.response, regex));
         }
         responseHeaderFilter.desc = "resp. header matches " + regex;
         return responseHeaderFilter;
@@ -1719,9 +1720,9 @@ Filt = (function() {
         regex = new RegExp(regex, "i");
         function contentTypeFilter(flow){
             return (
-                (flow.request && regex.test(RequestUtils.getContentType(flow.request)))
+                (flow.request && regex.test(flowutils.RequestUtils.getContentType(flow.request)))
                 ||
-                (flow.response && regex.test(ResponseUtils.getContentType(flow.response)))
+                (flow.response && regex.test(flowutils.ResponseUtils.getContentType(flow.response)))
             );
         }
         contentTypeFilter.desc = "content type matches " + regex;
@@ -1730,7 +1731,7 @@ Filt = (function() {
     function requestContentType(regex){
         regex = new RegExp(regex, "i");
         function requestContentTypeFilter(flow){
-            return flow.request && regex.test(RequestUtils.getContentType(flow.request));
+            return flow.request && regex.test(flowutils.RequestUtils.getContentType(flow.request));
         }
         requestContentTypeFilter.desc = "req. content type matches " + regex;
         return requestContentTypeFilter;
@@ -1738,7 +1739,7 @@ Filt = (function() {
     function responseContentType(regex){
         regex = new RegExp(regex, "i");
         function responseContentTypeFilter(flow){
-            return flow.response && regex.test(ResponseUtils.getContentType(flow.response));
+            return flow.response && regex.test(flowutils.ResponseUtils.getContentType(flow.response));
         }
         responseContentTypeFilter.desc = "resp. content type matches " + regex;
         return responseContentTypeFilter;
@@ -1746,7 +1747,7 @@ Filt = (function() {
     function url(regex){
         regex = new RegExp(regex, "i");
         function urlFilter(flow){
-            return flow.request && regex.test(RequestUtils.pretty_url(flow.request));
+            return flow.request && regex.test(flowutils.RequestUtils.pretty_url(flow.request));
         }
         urlFilter.desc = "url matches " + regex;
         return urlFilter;
@@ -1770,7 +1771,4 @@ Filt = (function() {
     SyntaxError: SyntaxError,
     parse:       parse
   };
-})();
-/* jshint ignore:end */
-
-module.exports = Filt;
+})();

web/src/js/filt/filt.peg

@@ -1,6 +1,8 @@
 // PEG.js filter rules - see http://pegjs.majda.cz/online
 
 {
+var flowutils = require("../flow/utils.js");
+
 function or(first, second) {
     // Add explicit function names to ease debugging.
     function orFilter() {
@@ -49,7 +51,7 @@ var ASSET_TYPES = [
 ];
 function assetFilter(flow) {
     if (flow.response) {
-        var ct = ResponseUtils.getContentType(flow.response);
+        var ct = flowutils.ResponseUtils.getContentType(flow.response);
         var i = ASSET_TYPES.length;
         while (i--) {
             if (ASSET_TYPES[i].test(ct)) {
@@ -83,9 +85,9 @@ function header(regex){
     regex = new RegExp(regex, "i");
     function headerFilter(flow){
         return (
-            (flow.request && RequestUtils.match_header(flow.request, regex))
+            (flow.request && flowutils.RequestUtils.match_header(flow.request, regex))
             ||
-            (flow.response && ResponseUtils.match_header(flow.response, regex))
+            (flow.response && flowutils.ResponseUtils.match_header(flow.response, regex))
         );
     }
     headerFilter.desc = "header matches " + regex;
@@ -94,7 +96,7 @@ function header(regex){
 function requestHeader(regex){
     regex = new RegExp(regex, "i");
     function requestHeaderFilter(flow){
-        return (flow.request && RequestUtils.match_header(flow.request, regex));
+        return (flow.request && flowutils.RequestUtils.match_header(flow.request, regex));
     }
     requestHeaderFilter.desc = "req. header matches " + regex;
     return requestHeaderFilter;
@@ -102,7 +104,7 @@ function requestHeader(regex){
 function responseHeader(regex){
     regex = new RegExp(regex, "i");
     function responseHeaderFilter(flow){
-        return (flow.response && ResponseUtils.match_header(flow.response, regex));
+        return (flow.response && flowutils.ResponseUtils.match_header(flow.response, regex));
     }
     responseHeaderFilter.desc = "resp. header matches " + regex;
     return responseHeaderFilter;
@@ -128,9 +130,9 @@ function contentType(regex){
     regex = new RegExp(regex, "i");
     function contentTypeFilter(flow){
         return (
-            (flow.request && regex.test(RequestUtils.getContentType(flow.request)))
+            (flow.request && regex.test(flowutils.RequestUtils.getContentType(flow.request)))
             ||
-            (flow.response && regex.test(ResponseUtils.getContentType(flow.response)))
+            (flow.response && regex.test(flowutils.ResponseUtils.getContentType(flow.response)))
         );
     }
     contentTypeFilter.desc = "content type matches " + regex;
@@ -139,7 +141,7 @@ function contentType(regex){
 function requestContentType(regex){
     regex = new RegExp(regex, "i");
     function requestContentTypeFilter(flow){
-        return flow.request && regex.test(RequestUtils.getContentType(flow.request));
+        return flow.request && regex.test(flowutils.RequestUtils.getContentType(flow.request));
     }
     requestContentTypeFilter.desc = "req. content type matches " + regex;
     return requestContentTypeFilter;
@@ -147,7 +149,7 @@ function requestContentType(regex){
 function responseContentType(regex){
     regex = new RegExp(regex, "i");
     function responseContentTypeFilter(flow){
-        return flow.response && regex.test(ResponseUtils.getContentType(flow.response));
+        return flow.response && regex.test(flowutils.ResponseUtils.getContentType(flow.response));
     }
     responseContentTypeFilter.desc = "resp. content type matches " + regex;
     return responseContentTypeFilter;
@@ -155,7 +157,7 @@ function responseContentType(regex){
 function url(regex){
     regex = new RegExp(regex, "i");
     function urlFilter(flow){
-        return flow.request && regex.test(RequestUtils.pretty_url(flow.request));
+        return flow.request && regex.test(flowutils.RequestUtils.pretty_url(flow.request));
     }
     urlFilter.desc = "url matches " + regex;
     return urlFilter;