We're not ready for ES6

Lets re-evaluate in June next year when it's actually released

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 MANIFEST
 /build
 /dist
@@ -23,4 +24,4 @@ libpathod
 node_modules
 bower_components
 *.compiled.js
-*.map
+*.map

libmproxy/web/static/js/app.js

@@ -33,6 +33,7 @@ AppDispatcher.dispatchServerAction = function(action) {
     action.actionSource = PayloadSources.SERVER_ACTION;
     this.dispatch(action);
 };
+
 var ActionTypes = {
     SETTINGS_UPDATE: "SETTINGS_UPDATE",
     EVENTLOG_ADD: "EVENTLOG_ADD"
@@ -51,7 +52,7 @@ var SettingsActions = {
     }
 };
 
-    function EventEmitter() {"use strict";
+function EventEmitter() {"use strict";
         this.listeners = {};
     }
     EventEmitter.prototype.emit=function(event) {"use strict";
@@ -103,6 +104,7 @@ for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(Even
 
 var SettingsStore = new _SettingsStore();
 AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
+
 //
 // We have an EventLogView and an EventLogStore:
 // The basic architecture is that one can request views on the event log
@@ -188,7 +190,7 @@ for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmi
 var EventLogStore = new _EventLogStore();
 AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
 
-    function _Connection(root) {"use strict";
+function _Connection(root) {"use strict";
         if (!root) {
             root = location.origin + "/api/v1";
         }
@@ -221,15 +223,16 @@ AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
     };
 
 var Connection = new _Connection();
+
 /** @jsx React.DOM */
 
 var MainMenu = React.createClass({displayName: 'MainMenu',
-    toggleEventLog:function() {
+    toggleEventLog: function() {
         SettingsActions.update({
             showEventLog: !this.props.settings.showEventLog
         });
     },
-    render:function(){
+    render: function(){
         return (
             React.DOM.div(null, 
                 React.DOM.button({className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, 
@@ -240,12 +243,12 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
     }
 });
 var ToolsMenu = React.createClass({displayName: 'ToolsMenu',
-    render:function(){
+    render: function(){
         return React.DOM.div(null, "Tools Menu");
     }
 });
 var ReportsMenu = React.createClass({displayName: 'ReportsMenu',
-    render:function(){
+    render: function(){
         return React.DOM.div(null, "Reports Menu");
     }
 });
@@ -270,20 +273,20 @@ var _Header_Entries = {
 };
 
 var Header = React.createClass({displayName: 'Header',
-    getInitialState:function(){
+    getInitialState: function(){
         return {
             active: "main"
         };
     },
-    handleClick:function(active){
+    handleClick: function(active){
         this.setState({active: active});
         ReactRouter.transitionTo(_Header_Entries[active].route);
         return false;
     },
-    handleFileClick:function(){
+    handleFileClick: function(){
         console.log("File click");
     },
-    render:function(){
+    render: function(){
         var header = [];
         for(var item in _Header_Entries){
             var classes = this.state.active == item ? "active" : "";
@@ -310,28 +313,29 @@ var Header = React.createClass({displayName: 'Header',
         );
     }
 });
+
 /** @jsx React.DOM */
 
 var TrafficTable = React.createClass({displayName: 'TrafficTable',
-    getInitialState:function() {
+    getInitialState: function() {
         return {
             flows: []
         };
     },
-    componentDidMount:function() {
+    componentDidMount: function() {
         //this.flowStore = FlowStore.getView();
         //this.flowStore.addListener("change",this.onFlowChange);
     },
-    componentWillUnmount:function() {
+    componentWillUnmount: function() {
         //this.flowStore.removeListener("change",this.onFlowChange);
         //this.flowStore.close();
     },
-    onFlowChange:function() {
+    onFlowChange: function() {
         this.setState({
             //flows: this.flowStore.getAll()
         });
     },
-    render:function() {
+    render: function() {
         /*var flows = this.state.flows.map(function(flow){
         return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
         }); */
@@ -344,34 +348,36 @@ var TrafficTable = React.createClass({displayName: 'TrafficTable',
         );
     }
 });
+
 /** @jsx React.DOM */
 
 var EventLog = React.createClass({displayName: 'EventLog',
-    getInitialState:function() {
+    getInitialState: function() {
         return {
             log: []
         };
     },
-    componentDidMount:function() {
+    componentDidMount: function() {
         this.log = EventLogStore.getView();
         this.log.addListener("change", this.onEventLogChange);
     },
-    componentWillUnmount:function() {
+    componentWillUnmount: function() {
         this.log.removeListener("change", this.onEventLogChange);
         this.log.close();
     },
-    onEventLogChange:function() {
+    onEventLogChange: function() {
         this.setState({
             log: this.log.getAll()
         });
     },
-    close:function() {
+    close: function() {
         SettingsActions.update({
             showEventLog: false
         });
     },
-    render:function() {
+    render: function() {
-        var messages = this.state.log.map(function(row)  {return React.DOM.div({key: row.id}, row.message);});
+        //var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
+        var messages = [];
         return (
             React.DOM.div({className: "eventlog"}, 
                 React.DOM.pre(null, 
@@ -382,10 +388,11 @@ var EventLog = React.createClass({displayName: 'EventLog',
         );
     }
 });
+
 /** @jsx React.DOM */
 
 var Footer = React.createClass({displayName: 'Footer',
-    render:function(){
+    render: function(){
         var mode = this.props.settings.mode;
         return (
             React.DOM.footer(null, 
@@ -394,37 +401,38 @@ var Footer = React.createClass({displayName: 'Footer',
         );
     }
 });
+
 /** @jsx React.DOM */
 
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({displayName: 'Reports',
-    render:function(){
+    render: function(){
         return React.DOM.div(null, "Report Editor");
     }
 });
 
 
 var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
-    getInitialState:function(){
+    getInitialState: function(){
         return { settings: SettingsStore.getAll() };
     },
-    componentDidMount:function(){
+    componentDidMount: function(){
         SettingsStore.addListener("change", this.onSettingsChange);
     },
-    componentWillUnmount:function(){
+    componentWillUnmount: function(){
         SettingsStore.removeListener("change", this.onSettingsChange);
     },
-    onSettingsChange:function(){
+    onSettingsChange: function(){
         console.log("onSettingsChange");
         this.setState({settings: SettingsStore.getAll()});
     },
-    render:function() {
+    render: function() {
         return (
             React.DOM.div({id: "container"}, 
-            Header({settings: this.state.settings}), 
+                Header({settings: this.state.settings}), 
-            React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), 
+                React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), 
-            this.state.settings.showEventLog ? EventLog(null) : null, 
+                    this.state.settings.showEventLog ? EventLog(null) : null, 
-            Footer({settings: this.state.settings})
+                Footer({settings: this.state.settings})
             )
             );
     }

web/gulpfile.js

@@ -32,17 +32,17 @@ var path = {
             'vendor/react-bootstrap/react-bootstrap.js'
         ],
         app: [
-            'js/Dispatcher.es6.js',
+            'js/dispatcher.js',
-            'js/actions.es6.js',
+            'js/actions.js',
-            'js/stores/base.es6.js',
+            'js/stores/base.js',
-            'js/stores/SettingsStore.es6.js',
+            'js/stores/settingstore.js',
-            'js/stores/EventLogStore.es6.js',
+            'js/stores/eventlogstore.js',
-            'js/Connection.es6.js',
+            'js/connection.js',
-            'js/components/Header.react.js',
+            'js/components/header.jsx',
-            'js/components/TrafficTable.react.js',
+            'js/components/traffictable.jsx',
-            'js/components/EventLog.react.js',
+            'js/components/eventlog.jsx',
-            'js/components/Footer.react.js',
+            'js/components/footer.jsx',
-            'js/components/ProxyApp.react.js',
+            'js/components/proxyapp.jsx',
             'js/app.js',
         ],
     },
@@ -81,7 +81,7 @@ function scripts(files, filename, dev) {
     return gulp.src(files, {base: "src", cwd: "src"})
         .pipe(dev ? dont_break_on_errors(): gutil.noop())
         .pipe(dev ? sourcemaps.init() : gutil.noop())
-        .pipe(react({harmony: true}))
+        .pipe(react({harmony: false}))
         .pipe(concat(filename))
         .pipe(!dev ? uglify() : gutil.noop())
         .pipe(dev ? sourcemaps.write(".", {sourceRoot: "/static"}) : gutil.noop())

web/src/js/actions.js

@@ -4,7 +4,7 @@ var ActionTypes = {
 };
 
 var SettingsActions = {
-    update(settings) {
+    update:function(settings) {
         settings = _.merge({}, SettingsStore.getAll(), settings);
         //TODO: Update server.
 
@@ -14,4 +14,4 @@ var SettingsActions = {
             settings: settings
         });
     }
-};
+};

web/src/js/components/eventlog.jsx

@@ -1,31 +1,32 @@
 /** @jsx React.DOM */
 
 var EventLog = React.createClass({
-    getInitialState() {
+    getInitialState: function() {
         return {
             log: []
         };
     },
-    componentDidMount() {
+    componentDidMount: function() {
         this.log = EventLogStore.getView();
         this.log.addListener("change", this.onEventLogChange);
     },
-    componentWillUnmount() {
+    componentWillUnmount: function() {
         this.log.removeListener("change", this.onEventLogChange);
         this.log.close();
     },
-    onEventLogChange() {
+    onEventLogChange: function() {
         this.setState({
             log: this.log.getAll()
         });
     },
-    close() {
+    close: function() {
         SettingsActions.update({
             showEventLog: false
         });
     },
-    render() {
+    render: function() {
-        var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
+        //var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
+        var messages = [];
         return (
             <div className="eventlog">
                 <pre>
@@ -35,4 +36,4 @@ var EventLog = React.createClass({
             </div>
         );
     }
-});
+});

web/src/js/components/footer.jsx

@@ -1,7 +1,7 @@
 /** @jsx React.DOM */
 
 var Footer = React.createClass({
-    render(){
+    render: function(){
         var mode = this.props.settings.mode;
         return (
             <footer>
@@ -9,4 +9,4 @@ var Footer = React.createClass({
             </footer>
         );
     }
-});
+});

web/src/js/components/header.jsx

@@ -1,12 +1,12 @@
 /** @jsx React.DOM */
 
 var MainMenu = React.createClass({
-    toggleEventLog() {
+    toggleEventLog: function() {
         SettingsActions.update({
             showEventLog: !this.props.settings.showEventLog
         });
     },
-    render(){
+    render: function(){
         return (
             <div>
                 <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
@@ -17,12 +17,12 @@ var MainMenu = React.createClass({
     }
 });
 var ToolsMenu = React.createClass({
-    render(){
+    render: function(){
         return <div>Tools Menu</div>;
     }
 });
 var ReportsMenu = React.createClass({
-    render(){
+    render: function(){
         return <div>Reports Menu</div>;
     }
 });
@@ -47,20 +47,20 @@ var _Header_Entries = {
 };
 
 var Header = React.createClass({
-    getInitialState(){
+    getInitialState: function(){
         return {
             active: "main"
         };
     },
-    handleClick(active){
+    handleClick: function(active){
         this.setState({active: active});
         ReactRouter.transitionTo(_Header_Entries[active].route);
         return false;
     },
-    handleFileClick(){
+    handleFileClick: function(){
         console.log("File click");
     },
-    render(){
+    render: function(){
         var header = [];
         for(var item in _Header_Entries){
             var classes = this.state.active == item ? "active" : "";
@@ -86,4 +86,4 @@ var Header = React.createClass({
             </header>
         );
     }
-});
+});

web/src/js/components/proxyapp.jsx

@@ -2,33 +2,33 @@
 
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({
-    render(){
+    render: function(){
         return <div>Report Editor</div>;
     }
 });
 
 
 var ProxyAppMain = React.createClass({
-    getInitialState(){
+    getInitialState: function(){
         return { settings: SettingsStore.getAll() };
     },
-    componentDidMount(){
+    componentDidMount: function(){
         SettingsStore.addListener("change", this.onSettingsChange);
     },
-    componentWillUnmount(){
+    componentWillUnmount: function(){
         SettingsStore.removeListener("change", this.onSettingsChange);
     },
-    onSettingsChange(){
+    onSettingsChange: function(){
         console.log("onSettingsChange");
         this.setState({settings: SettingsStore.getAll()});
     },
-    render() {
+    render: function() {
         return (
             <div id="container">
-            <Header settings={this.state.settings}/>
+                <Header settings={this.state.settings}/>
-            <div id="main"><this.props.activeRouteHandler/></div>
+                <div id="main"><this.props.activeRouteHandler/></div>
-            {this.state.settings.showEventLog ? <EventLog/> : null}
+                    {this.state.settings.showEventLog ? <EventLog/> : null}
-            <Footer settings={this.state.settings}/>
+                <Footer settings={this.state.settings}/>
             </div>
             );
     }

web/src/js/components/traffictable.jsx

@@ -1,25 +1,25 @@
 /** @jsx React.DOM */
 
 var TrafficTable = React.createClass({
-    getInitialState() {
+    getInitialState: function() {
         return {
             flows: []
         };
     },
-    componentDidMount() {
+    componentDidMount: function() {
         //this.flowStore = FlowStore.getView();
         //this.flowStore.addListener("change",this.onFlowChange);
     },
-    componentWillUnmount() {
+    componentWillUnmount: function() {
         //this.flowStore.removeListener("change",this.onFlowChange);
         //this.flowStore.close();
     },
-    onFlowChange() {
+    onFlowChange: function() {
         this.setState({
             //flows: this.flowStore.getAll()
         });
     },
-    render() {
+    render: function() {
         /*var flows = this.state.flows.map(function(flow){
         return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
         }); */
@@ -31,4 +31,4 @@ var TrafficTable = React.createClass({
             <div><pre> { x } </pre></div> 
         );
     }
-});
+});

web/src/js/connection.js

@@ -1,14 +1,13 @@
-class _Connection {
+function _Connection(root) {"use strict";
-    constructor(root) {
         if (!root) {
             root = location.origin + "/api/v1";
         }
         this.root = root;
     }
-    init() {
+    _Connection.prototype.init=function() {"use strict";
         this.openWebSocketConnection();
-    }
+    };
-    openWebSocketConnection() {
+    _Connection.prototype.openWebSocketConnection=function() {"use strict";
         this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws");
         var ws = this.ws;
 
@@ -16,19 +15,19 @@ class _Connection {
         ws.onmessage = this.onmessage.bind(this);
         ws.onerror = this.onerror.bind(this);
         ws.onclose = this.onclose.bind(this);
-    }
+    };
-    onopen(open) {
+    _Connection.prototype.onopen=function(open) {"use strict";
         console.log("onopen", this, arguments);
-    }
+    };
-    onmessage(message) {
+    _Connection.prototype.onmessage=function(message) {"use strict";
         //AppDispatcher.dispatchServerAction(...);
         console.log("onmessage", this, arguments);
-    }
+    };
-    onerror(error) {
+    _Connection.prototype.onerror=function(error) {"use strict";
         console.log("onerror", this, arguments);
-    }
+    };
-    onclose(close) {
+    _Connection.prototype.onclose=function(close) {"use strict";
         console.log("onclose", this, arguments);
-    }
+    };
-}
+
-var Connection = new _Connection();
+var Connection = new _Connection();

web/src/js/dispatcher.js

@@ -3,26 +3,26 @@ const PayloadSources = {
     SERVER_ACTION: "SERVER_ACTION"
 };
 
-class Dispatcher {
+
-    constructor() {
+    function Dispatcher() {"use strict";
         this.callbacks = [];
     }
-    register(callback) {
+    Dispatcher.prototype.register=function(callback) {"use strict";
         this.callbacks.push(callback);
-    }
+    };
-    unregister(callback) {
+    Dispatcher.prototype.unregister=function(callback) {"use strict";
         var index = this.callbacks.indexOf(f);
         if (index >= 0) {
             this.callbacks.splice(this.callbacks.indexOf(f), 1);
         }
-    }
+    };
-    dispatch(payload) {
+    Dispatcher.prototype.dispatch=function(payload) {"use strict";
         console.debug("dispatch", payload);
-        this.callbacks.forEach((callback) => {
+        this.callbacks.forEach(function(callback)  {
             callback(payload);
         });
-    }
+    };
-}
+
 
 AppDispatcher = new Dispatcher();
 AppDispatcher.dispatchViewAction = function(action) {
@@ -32,4 +32,4 @@ AppDispatcher.dispatchViewAction = function(action) {
 AppDispatcher.dispatchServerAction = function(action) {
     action.actionSource = PayloadSources.SERVER_ACTION;
     this.dispatch(action);
-};
+};

web/src/js/stores/SettingsStore.es6.js

@@ -1,27 +0,0 @@
-class _SettingsStore extends EventEmitter {
-    constructor() {
-        super();
-
-        //FIXME: What do we do if we haven't requested anything from the server yet?
-        this.settings = {
-            version: "0.12",
-            showEventLog: true,
-            mode: "transparent",
-        }; 
-    }
-    getAll() {
-        return this.settings;
-    }
-    handle(action) {
-        switch (action.actionType) {
-            case ActionTypes.SETTINGS_UPDATE:
-                this.settings = action.settings;
-                this.emit("change");
-                break;
-            default:
-                return;
-        }
-    }
-}
-var SettingsStore = new _SettingsStore();
-AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));

web/src/js/stores/base.js

@@ -1,20 +1,19 @@
-class EventEmitter {
+function EventEmitter() {"use strict";
-    constructor() {
         this.listeners = {};
     }
-    emit(event) {
+    EventEmitter.prototype.emit=function(event) {"use strict";
         if (!(event in this.listeners)) {
             return;
         }
         this.listeners[event].forEach(function(listener) {
             listener.apply(this, arguments);
         }.bind(this));
-    }
+    };
-    addListener(event, f) {
+    EventEmitter.prototype.addListener=function(event, f) {"use strict";
         this.listeners[event] = this.listeners[event] || [];
         this.listeners[event].push(f);
-    }
+    };
-    removeListener(event, f) {
+    EventEmitter.prototype.removeListener=function(event, f) {"use strict";
         if (!(event in this.listeners)) {
             return false;
         }
@@ -22,5 +21,4 @@ class EventEmitter {
         if (index >= 0) {
             this.listeners[event].splice(index, 1);
         }
-    }
+    };
-}

web/src/js/stores/eventlogstore.js

@@ -6,40 +6,40 @@
 //
 // See also: components/EventLog.react.js
 
-class EventLogView extends EventEmitter {
+for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){EventLogView[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;EventLogView.prototype=Object.create(____SuperProtoOfEventEmitter);EventLogView.prototype.constructor=EventLogView;EventLogView.__superConstructor__=EventEmitter;
-    constructor(store, live) {
+    function EventLogView(store, live) {"use strict";
-        super();
+        EventEmitter.call(this);
-        this._store = store;
+        this.$EventLogView_store = store;
         this.live = live;
         this.log = [];
 
         this.add = this.add.bind(this);
 
         if (live) {
-            this._store.addListener("new_entry", this.add);
+            this.$EventLogView_store.addListener("new_entry", this.add);
         }
     }
-    close() {
+    EventLogView.prototype.close=function() {"use strict";
-        this._store.removeListener("new_entry", this.add);
+        this.$EventLogView_store.removeListener("new_entry", this.add);
-    }
+    };
-    getAll() {
+    EventLogView.prototype.getAll=function() {"use strict";
         return this.log;
-    }
+    };
-    add(entry) {
+    EventLogView.prototype.add=function(entry) {"use strict";
         this.log.push(entry);
         this.emit("change");
-    }
+    };
-    add_bulk(messages) {
+    EventLogView.prototype.add_bulk=function(messages) {"use strict";
         var log = messages;
         var last_id = log[log.length - 1].id;
-        var to_add = _.filter(this.log, entry => entry.id > last_id);
+        var to_add = _.filter(this.log, function(entry)  {return entry.id > last_id;});
         this.log = log.concat(to_add);
         this.emit("change");
-    }
+    };
-}
 
-class _EventLogStore extends EventEmitter {
+
-    getView(since) {
+for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_EventLogStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}_EventLogStore.prototype=Object.create(____SuperProtoOfEventEmitter);_EventLogStore.prototype.constructor=_EventLogStore;_EventLogStore.__superConstructor__=EventEmitter;function _EventLogStore(){"use strict";if(EventEmitter!==null){EventEmitter.apply(this,arguments);}}
+    _EventLogStore.prototype.getView=function(since) {"use strict";
         var view = new EventLogView(this, !since);
 
         //TODO: Really do bulk retrieval of last messages.
@@ -69,8 +69,8 @@ class _EventLogStore extends EventEmitter {
             });
         }, 1000);
         return view;
-    }
+    };
-    handle(action) {
+    _EventLogStore.prototype.handle=function(action) {"use strict";
         switch (action.actionType) {
             case ActionTypes.EVENTLOG_ADD:
                 this.emit("new_message", action.message);
@@ -78,7 +78,7 @@ class _EventLogStore extends EventEmitter {
             default:
                 return;
         }
-    }
+    };
-}
+
 var EventLogStore = new _EventLogStore();
-AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
+AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));

web/src/js/stores/settingstore.js

@@ -0,0 +1,27 @@
+for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_SettingsStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;_SettingsStore.prototype=Object.create(____SuperProtoOfEventEmitter);_SettingsStore.prototype.constructor=_SettingsStore;_SettingsStore.__superConstructor__=EventEmitter;
+    function _SettingsStore() {"use strict";
+        EventEmitter.call(this);
+
+        //FIXME: What do we do if we haven't requested anything from the server yet?
+        this.settings = {
+            version: "0.12",
+            showEventLog: true,
+            mode: "transparent",
+        }; 
+    }
+    _SettingsStore.prototype.getAll=function() {"use strict";
+        return this.settings;
+    };
+    _SettingsStore.prototype.handle=function(action) {"use strict";
+        switch (action.actionType) {
+            case ActionTypes.SETTINGS_UPDATE:
+                this.settings = action.settings;
+                this.emit("change");
+                break;
+            default:
+                return;
+        }
+    };
+
+var SettingsStore = new _SettingsStore();
+AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));