web: use es6 modules

23 files changed, 237 insertions, 300 deletions

diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 2455a52e..6ded4c44 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -1,8 +1,8 @@
-var $ = require("jquery");
-var _ = require("lodash");
-var AppDispatcher = require("./dispatcher.js").AppDispatcher;
+import $ from "jquery";
+import _ from "lodash";
+import {AppDispatcher} from "./dispatcher.js";
 
-var ActionTypes = {
+export var ActionTypes = {
     // Connection
     CONNECTION_OPEN: "connection_open",
     CONNECTION_CLOSE: "connection_close",
@@ -11,17 +11,17 @@ var ActionTypes = {
     // Stores
     SETTINGS_STORE: "settings",
     EVENT_STORE: "events",
-    FLOW_STORE: "flows",
+    FLOW_STORE: "flows"
 };
 
-var StoreCmds = {
+export var StoreCmds = {
     ADD: "add",
     UPDATE: "update",
     REMOVE: "remove",
     RESET: "reset"
 };
 
-var ConnectionActions = {
+export var ConnectionActions = {
     open: function () {
         AppDispatcher.dispatchViewAction({
             type: ActionTypes.CONNECTION_OPEN
@@ -39,7 +39,7 @@ var ConnectionActions = {
     }
 };
 
-var SettingsActions = {
+export var SettingsActions = {
     update: function (settings) {
 
         $.ajax({
@@ -61,7 +61,7 @@ var SettingsActions = {
 };
 
 var EventLogActions_event_id = 0;
-var EventLogActions = {
+export var EventLogActions = {
     add_event: function (message) {
         AppDispatcher.dispatchViewAction({
             type: ActionTypes.EVENT_STORE,
@@ -75,7 +75,7 @@ var EventLogActions = {
     }
 };
 
-var FlowActions = {
+export var FlowActions = {
     accept: function (flow) {
         $.post("/flows/" + flow.id + "/accept");
     },
@@ -120,18 +120,8 @@ var FlowActions = {
     }
 };
 
-var Query = {
+export var Query = {
     SEARCH: "s",
     HIGHLIGHT: "h",
     SHOW_EVENTLOG: "e"
-};
-
-module.exports = {
-    ActionTypes: ActionTypes,
-    ConnectionActions: ConnectionActions,
-    FlowActions: FlowActions,
-    StoreCmds: StoreCmds,
-    SettingsActions: SettingsActions,
-    EventLogActions: EventLogActions,
-    Query: Query
 };
\ No newline at end of file
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index f910b3d8..5fae7415 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -16,7 +16,7 @@ export var AutoScrollMixin = {
             var node = ReactDOM.findDOMNode(this);
             node.scrollTop = node.scrollHeight;
         }
-    },
+    }
 };
 
 
@@ -24,7 +24,7 @@ export var StickyHeadMixin = {
     adjustHead: function () {
         // Abusing CSS transforms to set the element
         // referenced as head into some kind of position:sticky.
-        var head = this.refs.head;
+        var head = ReactDOM.findDOMNode(this.refs.head);
         head.style.transform = "translate(0," + ReactDOM.findDOMNode(this).scrollTop + "px)";
     }
 };
diff --git a/web/src/js/components/editor.js b/web/src/js/components/editor.js
index 62c5310c..c929a244 100644
--- a/web/src/js/components/editor.js
+++ b/web/src/js/components/editor.js
@@ -1,7 +1,7 @@
-var React = require("react");
-var ReactDOM = require('react-dom');
-var common = require("./common.js");
-var utils = require("../utils.js");
+import React from "react";
+import ReactDOM from 'react-dom';
+import {ChildFocus} from "./common.js";
+import {Key} from "../utils.js";
 
 var contentToHtml = function (content) {
     return _.escape(content);
@@ -139,12 +139,12 @@ var EditorBase = React.createClass({
     onKeyDown: function (e) {
         e.stopPropagation();
         switch (e.keyCode) {
-            case utils.Key.ESC:
+            case Key.ESC:
                 e.preventDefault();
                 this.reset();
                 this.stop();
                 break;
-            case utils.Key.ENTER:
+            case Key.ENTER:
                 if (this.props.submitOnEnter && !e.shiftKey) {
                     e.preventDefault();
                     this.stop();
@@ -213,8 +213,8 @@ var ValidateEditor = React.createClass({
 /*
  Text Editor with mitmweb-specific convenience features
  */
-var ValueEditor = React.createClass({
-    mixins: [common.ChildFocus],
+export var ValueEditor = React.createClass({
+    mixins: [ChildFocus],
     propTypes: {
         content: React.PropTypes.string.isRequired,
         onDone: React.PropTypes.func.isRequired,
@@ -234,8 +234,4 @@ var ValueEditor = React.createClass({
     onStop: function () {
         this.returnFocus();
     }
-});
-
-module.exports = {
-    ValueEditor: ValueEditor
-};
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 0f463eb0..650f7cd3 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -2,7 +2,7 @@ import React from "react"
 import {AutoScrollMixin, Router} from "./common.js"
 import {Query} from "../actions.js"
 import { VirtualScrollMixin } from "./virtualscroll.js"
-import views from "../store/view.js"
+import {StoreView} from "../store/view.js"
 import _ from "lodash"
 
 var LogMessage = React.createClass({
@@ -39,7 +39,7 @@ var EventLogContents = React.createClass({
         var filterFn = function (entry) {
             return this.props.filter[entry.level];
         };
-        var view = new views.StoreView(this.context.eventStore, filterFn.bind(this));
+        var view = new StoreView(this.context.eventStore, filterFn.bind(this));
         view.addListener("add", this.onEventLogChange);
         view.addListener("recalculate", this.onEventLogChange);
 
diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js
index 74d96216..dbbe8847 100644
--- a/web/src/js/components/flowtable-columns.js
+++ b/web/src/js/components/flowtable-columns.js
@@ -1,7 +1,6 @@
-var React = require("react");
-var RequestUtils = require("../flow/utils.js").RequestUtils;
-var ResponseUtils = require("../flow/utils.js").ResponseUtils;
-var utils = require("../utils.js");
+import React from "react";
+import {RequestUtils, ResponseUtils} from "../flow/utils.js";
+import {formatSize, formatTimeDelta} from "../utils.js";
 
 var TLSColumn = React.createClass({
     statics: {
@@ -156,7 +155,7 @@ var SizeColumn = React.createClass({
         if (flow.response) {
             total += flow.response.contentLength || 0;
         }
-        var size = utils.formatSize(total);
+        var size = formatSize(total);
         return <td className="col-size">{size}</td>;
     }
 });
@@ -179,7 +178,7 @@ var TimeColumn = React.createClass({
         var flow = this.props.flow;
         var time;
         if (flow.response) {
-            time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
+            time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
         } else {
             time = "...";
         }
@@ -198,4 +197,4 @@ var all_columns = [
     TimeColumn
 ];
 
-module.exports = all_columns;
+export default all_columns;
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index b27ed30d..1d99c318 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -1,11 +1,11 @@
-var React = require("react");
-var ReactDOM = require('react-dom');
-var common = require("./common.js");
-var utils = require("../utils.js");
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import {StickyHeadMixin, AutoScrollMixin} from "./common.js";
+import {reverseString} from "../utils.js";
+import _ from "lodash";
 
 import { VirtualScrollMixin } from "./virtualscroll.js"
-var flowtable_columns = require("./flowtable-columns.js");
+import flowtable_columns from "./flowtable-columns.js";
 
 var FlowRow = React.createClass({
     render: function () {
@@ -74,7 +74,7 @@ var FlowTableHead = React.createClass({
             sortKeyFun = hasSort && function(){
                 var k = Column.sortKeyFun.apply(this, arguments);
                 if(_.isString(k)){
-                    return utils.reverseString(""+k);
+                    return reverseString(""+k);
                 } else {
                     return -k;
                 }
@@ -108,7 +108,7 @@ var FlowTableHead = React.createClass({
 var ROW_HEIGHT = 32;
 
 var FlowTable = React.createClass({
-    mixins: [common.StickyHeadMixin, common.AutoScrollMixin, VirtualScrollMixin],
+    mixins: [StickyHeadMixin, AutoScrollMixin, VirtualScrollMixin],
     contextTypes: {
         view: React.PropTypes.object.isRequired
     },
@@ -185,4 +185,4 @@ var FlowTable = React.createClass({
     }
 });
 
-module.exports = FlowTable;
+export default FlowTable;
diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js
index 63d22c1c..2743eec3 100644
--- a/web/src/js/components/flowview/contentview.js
+++ b/web/src/js/components/flowview/contentview.js
@@ -1,8 +1,8 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import _ from "lodash";
 
-var MessageUtils = require("../../flow/utils.js").MessageUtils;
-var utils = require("../../utils.js");
+import {MessageUtils} from "../../flow/utils.js";
+import {formatSize} from "../../utils.js";
 
 var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i;
 var ViewImage = React.createClass({
@@ -145,7 +145,7 @@ var TooLarge = React.createClass({
         }
     },
     render: function () {
-        var size = utils.formatSize(this.props.message.contentLength);
+        var size = formatSize(this.props.message.contentLength);
         return <div className="alert alert-warning">
             <button onClick={this.props.onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
             {size} content size.
@@ -234,4 +234,4 @@ var ContentView = React.createClass({
     }
 });
 
-module.exports = ContentView;
\ No newline at end of file
+export default ContentView;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/details.js b/web/src/js/components/flowview/details.js
index 00e0116c..45fe1292 100644
--- a/web/src/js/components/flowview/details.js
+++ b/web/src/js/components/flowview/details.js
@@ -1,7 +1,7 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import _ from "lodash";
 
-var utils = require("../../utils.js");
+import {formatTimeStamp, formatTimeDelta} from "../../utils.js";
 
 var TimeStamp = React.createClass({
     render: function () {
@@ -11,11 +11,11 @@ var TimeStamp = React.createClass({
             return <tr></tr>;
         }
 
-        var ts = utils.formatTimeStamp(this.props.t);
+        var ts = formatTimeStamp(this.props.t);
 
         var delta;
         if (this.props.deltaTo) {
-            delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
+            delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
             delta = <span className="text-muted">{"(" + delta + ")"}</span>;
         } else {
             delta = null;
@@ -178,4 +178,4 @@ var Details = React.createClass({
     }
 });
 
-module.exports = Details;
\ No newline at end of file
+export default Details;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
index bd34fe8d..47531f58 100644
--- a/web/src/js/components/flowview/index.js
+++ b/web/src/js/components/flowview/index.js
@@ -1,17 +1,16 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
 
-import { Router, StickyHeadMixin } from "../common.js"
-var Nav = require("./nav.js");
-var Messages = require("./messages.js");
-var Details = require("./details.js");
-var Prompt = require("../prompt.js");
+import {Router, StickyHeadMixin} from "../common.js"
+import Nav from "./nav.js";
+import {Request, Response, Error} from "./messages.js";
+import Details from "./details.js";
+import Prompt from "../prompt.js";
 
 
 var allTabs = {
-    request: Messages.Request,
-    response: Messages.Response,
-    error: Messages.Error,
+    request: Request,
+    response: Response,
+    error: Error,
     details: Details
 };
 
@@ -40,22 +39,22 @@ var FlowView = React.createClass({
         this.selectTab(tabs[nextIndex]);
     },
     selectTab: function (panel) {
-        this.updateLocation(`/flows/${this.getParams().flowId}/${panel}`);
+        this.updateLocation(`/flows/${this.props.flow.id}/${panel}`);
     },
     promptEdit: function () {
         var options;
-        switch(this.props.tab){
+        switch (this.props.tab) {
             case "request":
                 options = [
                     "method",
                     "url",
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "header"
                     /*, "content"*/];
                 break;
             case "response":
                 options = [
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "code",
                     "message",
                     "header"
@@ -71,7 +70,7 @@ var FlowView = React.createClass({
             prompt: {
                 done: function (k) {
                     this.setState({prompt: false});
-                    if(k){
+                    if (k) {
                         this.refs.tab.edit(k);
                     }
                 }.bind(this),
@@ -104,10 +103,10 @@ var FlowView = React.createClass({
         return (
             <div className="flow-detail" onScroll={this.adjustHead}>
                 <Nav ref="head"
-                    flow={flow}
-                    tabs={tabs}
-                    active={active}
-                    selectTab={this.selectTab}/>
+                     flow={flow}
+                     tabs={tabs}
+                     active={active}
+                     selectTab={this.selectTab}/>
                 <Tab ref="tab" flow={flow}/>
                 {prompt}
             </div>
@@ -115,4 +114,4 @@ var FlowView = React.createClass({
     }
 });
 
-module.exports = FlowView;
\ No newline at end of file
+export default FlowView;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js
index c11ee46f..2885b3b1 100644
--- a/web/src/js/components/flowview/messages.js
+++ b/web/src/js/components/flowview/messages.js
@@ -1,13 +1,12 @@
-var React = require("react");
-var ReactDOM = require('react-dom');
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import _ from "lodash";
 
-var common = require("../common.js");
-var actions = require("../../actions.js");
-var flowutils = require("../../flow/utils.js");
-var utils = require("../../utils.js");
-var ContentView = require("./contentview.js");
-var ValueEditor = require("../editor.js").ValueEditor;
+import {FlowActions} from "../../actions.js";
+import {RequestUtils, isValidHttpVersion, parseUrl, parseHttpVersion} from "../../flow/utils.js";
+import {Key, formatTimeStamp} from "../../utils.js";
+import ContentView from "./contentview.js";
+import {ValueEditor} from "../editor.js";
 
 var Headers = React.createClass({
     propTypes: {
@@ -103,13 +102,13 @@ var HeaderEditor = React.createClass({
     },
     onKeyDown: function (e) {
         switch (e.keyCode) {
-            case utils.Key.BACKSPACE:
+            case Key.BACKSPACE:
                 var s = window.getSelection().getRangeAt(0);
                 if (s.startOffset === 0 && s.endOffset === 0) {
                     this.props.onRemove(e);
                 }
                 break;
-            case utils.Key.TAB:
+            case Key.TAB:
                 if (!e.shiftKey) {
                     this.props.onTab(e);
                 }
@@ -121,7 +120,7 @@ var HeaderEditor = React.createClass({
 var RequestLine = React.createClass({
     render: function () {
         var flow = this.props.flow;
-        var url = flowutils.RequestUtils.pretty_url(flow.request);
+        var url = RequestUtils.pretty_url(flow.request);
         var httpver = flow.request.http_version;
 
         return <div className="first-line request-line">
@@ -142,31 +141,31 @@ var RequestLine = React.createClass({
                 ref="httpVersion"
                 content={httpver}
                 onDone={this.onHttpVersionChange}
-                isValid={flowutils.isValidHttpVersion}
+                isValid={isValidHttpVersion}
                 inline/>
         </div>
     },
     isValidUrl: function (url) {
-        var u = flowutils.parseUrl(url);
+        var u = parseUrl(url);
         return !!u.host;
     },
     onMethodChange: function (nextMethod) {
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {request: {method: nextMethod}}
         );
     },
     onUrlChange: function (nextUrl) {
-        var props = flowutils.parseUrl(nextUrl);
+        var props = parseUrl(nextUrl);
         props.path = props.path || "";
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {request: props}
         );
     },
     onHttpVersionChange: function (nextVer) {
-        var ver = flowutils.parseHttpVersion(nextVer);
-        actions.FlowActions.update(
+        var ver = parseHttpVersion(nextVer);
+        FlowActions.update(
             this.props.flow,
             {request: {http_version: ver}}
         );
@@ -182,7 +181,7 @@ var ResponseLine = React.createClass({
                 ref="httpVersion"
                 content={httpver}
                 onDone={this.onHttpVersionChange}
-                isValid={flowutils.isValidHttpVersion}
+                isValid={isValidHttpVersion}
                 inline/>
         &nbsp;
             <ValueEditor
@@ -194,7 +193,7 @@ var ResponseLine = React.createClass({
         &nbsp;
             <ValueEditor
                 ref="msg"
-                content={flow.response.msg}
+                content={flow.response.reason}
                 onDone={this.onMsgChange}
                 inline/>
         </div>;
@@ -203,28 +202,28 @@ var ResponseLine = React.createClass({
         return /^\d+$/.test(code);
     },
     onHttpVersionChange: function (nextVer) {
-        var ver = flowutils.parseHttpVersion(nextVer);
-        actions.FlowActions.update(
+        var ver = parseHttpVersion(nextVer);
+        FlowActions.update(
             this.props.flow,
             {response: {http_version: ver}}
         );
     },
     onMsgChange: function (nextMsg) {
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {response: {msg: nextMsg}}
         );
     },
     onCodeChange: function (nextCode) {
         nextCode = parseInt(nextCode);
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {response: {code: nextCode}}
         );
     }
 });
 
-var Request = React.createClass({
+export var Request = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -256,7 +255,7 @@ var Request = React.createClass({
         }
     },
     onHeaderChange: function (nextHeaders) {
-        actions.FlowActions.update(this.props.flow, {
+        FlowActions.update(this.props.flow, {
             request: {
                 headers: nextHeaders
             }
@@ -264,7 +263,7 @@ var Request = React.createClass({
     }
 });
 
-var Response = React.createClass({
+export var Response = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -296,7 +295,7 @@ var Response = React.createClass({
         }
     },
     onHeaderChange: function (nextHeaders) {
-        actions.FlowActions.update(this.props.flow, {
+        FlowActions.update(this.props.flow, {
             response: {
                 headers: nextHeaders
             }
@@ -304,7 +303,7 @@ var Response = React.createClass({
     }
 });
 
-var Error = React.createClass({
+export var Error = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -312,16 +311,10 @@ var Error = React.createClass({
                 <div className="alert alert-warning">
                 {flow.error.msg}
                     <div>
-                        <small>{ utils.formatTimeStamp(flow.error.timestamp) }</small>
+                        <small>{ formatTimeStamp(flow.error.timestamp) }</small>
                     </div>
                 </div>
             </section>
         );
     }
 });
-
-module.exports = {
-    Request: Request,
-    Response: Response,
-    Error: Error
-};
diff --git a/web/src/js/components/flowview/nav.js b/web/src/js/components/flowview/nav.js
index 46eda707..a12fd1fd 100644
--- a/web/src/js/components/flowview/nav.js
+++ b/web/src/js/components/flowview/nav.js
@@ -1,6 +1,6 @@
-var React = require("react");
+import React from "react";
 
-var actions = require("../../actions.js");
+import {FlowActions} from "../../actions.js";
 
 var NavAction = React.createClass({
     onClick: function (e) {
@@ -38,19 +38,19 @@ var Nav = React.createClass({
 
         var acceptButton = null;
         if(flow.intercepted){
-            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
+            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={FlowActions.accept.bind(null, flow)} />;
         }
         var revertButton = null;
         if(flow.modified){
-            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
+            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={FlowActions.revert.bind(null, flow)} />;
         }
 
         return (
             <nav ref="head" className="nav-tabs nav-tabs-sm">
                 {tabs}
-                <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
-                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
-                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
+                <NavAction title="[d]elete flow" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)} />
+                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} />
+                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} />
                 {acceptButton}
                 {revertButton}
             </nav>
@@ -58,4 +58,4 @@ var Nav = React.createClass({
     }
 });
 
-module.exports = Nav;
\ No newline at end of file
+export default Nav;
\ No newline at end of file
diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js
index 229d691b..415c2577 100644
--- a/web/src/js/components/footer.js
+++ b/web/src/js/components/footer.js
@@ -1,8 +1,8 @@
-var React = require("react");
-var common = require("./common.js");
+import React from "react";
+import {SettingsState} from "./common.js";
 
 var Footer = React.createClass({
-    mixins: [common.SettingsState],
+    mixins: [SettingsState],
     render: function () {
         var mode = this.state.settings.mode;
         var intercept = this.state.settings.intercept;
@@ -16,4 +16,4 @@ var Footer = React.createClass({
     }
 });
 
-module.exports = Footer;
\ No newline at end of file
+export default Footer;
\ No newline at end of file
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index d55c6443..3833a6ee 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -1,12 +1,12 @@
-var React = require("react");
-var ReactDOM = require('react-dom');
-var $ = require("jquery");
+import React from "react";
+import ReactDOM from 'react-dom';
+import $ from "jquery";
 
-var Filt = require("../filt/filt.js");
-var utils = require("../utils.js");
+import Filt from "../filt/filt.js";
+import {Key} from "../utils.js";
 import {Router, SettingsState, ChildFocus} from "./common.js";
-var actions = require("../actions.js");
-var Query = require("../actions.js").Query;
+import {SettingsActions, FlowActions} from "../actions.js";
+import {Query} from "../actions.js";
 
 var FilterDocs = React.createClass({
     statics: {
@@ -109,7 +109,7 @@ var FilterInput = React.createClass({
         this.setState({mousefocus: false});
     },
     onKeyDown: function (e) {
-        if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) {
+        if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) {
             this.blur();
             // If closed using ESC/ENTER, hide the tooltip.
             this.setState({mousefocus: false});
@@ -158,7 +158,7 @@ var FilterInput = React.createClass({
     }
 });
 
-var MainMenu = React.createClass({
+export var MainMenu = React.createClass({
     mixins: [Router, SettingsState],
     statics: {
         title: "Start",
@@ -175,7 +175,7 @@ var MainMenu = React.createClass({
         this.updateLocation(undefined, d);
     },
     onInterceptChange: function (val) {
-        actions.SettingsActions.update({intercept: val});
+        SettingsActions.update({intercept: val});
     },
     render: function () {
         var search = this.getQuery()[Query.SEARCH] || "";
@@ -281,7 +281,7 @@ var FileMenu = React.createClass({
     handleNewClick: function (e) {
         e.preventDefault();
         if (confirm("Delete all flows?")) {
-            actions.FlowActions.clear();
+            FlowActions.clear();
         }
     },
     handleOpenClick: function (e) {
@@ -347,7 +347,7 @@ var FileMenu = React.createClass({
 var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */];
 
 
-var Header = React.createClass({
+export var Header = React.createClass({
     mixins: [Router],
     getInitialState: function () {
         return {
@@ -390,9 +390,3 @@ var Header = React.createClass({
         );
     }
 });
-
-
-module.exports = {
-    Header: Header,
-    MainMenu: MainMenu
-};
\ No newline at end of file
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 5c9afe0c..cc1f05ae 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -1,13 +1,13 @@
-var React = require("react");
+import React from "react";
 
-var actions = require("../actions.js");
-var Query = require("../actions.js").Query;
-var utils = require("../utils.js");
-var views = require("../store/view.js");
-var Filt = require("../filt/filt.js");
+import {FlowActions} from "../actions.js";
+import {Query} from "../actions.js";
+import {Key} from "../utils.js";
+import {StoreView} from "../store/view.js";
+import Filt from "../filt/filt.js";
 import { Router, Splitter} from "./common.js"
-var FlowTable = require("./flowtable.js");
-var FlowView = require("./flowview/index.js");
+import FlowTable from "./flowtable.js";
+import FlowView from "./flowview/index.js";
 
 var MainView = React.createClass({
     mixins: [Router],
@@ -24,7 +24,7 @@ var MainView = React.createClass({
     },
     getInitialState: function () {
         var sortKeyFun = false;
-        var view = new views.StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun);
+        var view = new StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun);
         view.addListener("recalculate", this.onRecalculate);
         view.addListener("add", this.onUpdate);
         view.addListener("update", this.onUpdate);
@@ -130,80 +130,80 @@ var MainView = React.createClass({
             return;
         }
         switch (e.keyCode) {
-            case utils.Key.K:
-            case utils.Key.UP:
+            case Key.K:
+            case Key.UP:
                 this.selectFlowRelative(-1);
                 break;
-            case utils.Key.J:
-            case utils.Key.DOWN:
+            case Key.J:
+            case Key.DOWN:
                 this.selectFlowRelative(+1);
                 break;
-            case utils.Key.SPACE:
-            case utils.Key.PAGE_DOWN:
+            case Key.SPACE:
+            case Key.PAGE_DOWN:
                 this.selectFlowRelative(+10);
                 break;
-            case utils.Key.PAGE_UP:
+            case Key.PAGE_UP:
                 this.selectFlowRelative(-10);
                 break;
-            case utils.Key.END:
+            case Key.END:
                 this.selectFlowRelative(+1e10);
                 break;
-            case utils.Key.HOME:
+            case Key.HOME:
                 this.selectFlowRelative(-1e10);
                 break;
-            case utils.Key.ESC:
+            case Key.ESC:
                 this.selectFlow(null);
                 break;
-            case utils.Key.H:
-            case utils.Key.LEFT:
+            case Key.H:
+            case Key.LEFT:
                 if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(-1);
                 }
                 break;
-            case utils.Key.L:
-            case utils.Key.TAB:
-            case utils.Key.RIGHT:
+            case Key.L:
+            case Key.TAB:
+            case Key.RIGHT:
                 if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(+1);
                 }
                 break;
-            case utils.Key.C:
+            case Key.C:
                 if (e.shiftKey) {
-                    actions.FlowActions.clear();
+                    FlowActions.clear();
                 }
                 break;
-            case utils.Key.D:
+            case Key.D:
                 if (flow) {
                     if (e.shiftKey) {
-                        actions.FlowActions.duplicate(flow);
+                        FlowActions.duplicate(flow);
                     } else {
-                        actions.FlowActions.delete(flow);
+                        FlowActions.delete(flow);
                     }
                 }
                 break;
-            case utils.Key.A:
+            case Key.A:
                 if (e.shiftKey) {
-                    actions.FlowActions.accept_all();
+                    FlowActions.accept_all();
                 } else if (flow && flow.intercepted) {
-                    actions.FlowActions.accept(flow);
+                    FlowActions.accept(flow);
                 }
                 break;
-            case utils.Key.R:
+            case Key.R:
                 if (!e.shiftKey && flow) {
-                    actions.FlowActions.replay(flow);
+                    FlowActions.replay(flow);
                 }
                 break;
-            case utils.Key.V:
+            case Key.V:
                 if (e.shiftKey && flow && flow.modified) {
-                    actions.FlowActions.revert(flow);
+                    FlowActions.revert(flow);
                 }
                 break;
-            case utils.Key.E:
+            case Key.E:
                 if (this.refs.flowDetails) {
                     this.refs.flowDetails.promptEdit();
                 }
                 break;
-            case utils.Key.SHIFT:
+            case Key.SHIFT:
                 break;
             default:
                 console.debug("keydown", e.keyCode);
@@ -243,4 +243,4 @@ var MainView = React.createClass({
     }
 });
 
-module.exports = MainView;
+export default MainView;
diff --git a/web/src/js/components/prompt.js b/web/src/js/components/prompt.js
index b4777934..7b398038 100644
--- a/web/src/js/components/prompt.js
+++ b/web/src/js/components/prompt.js
@@ -1,8 +1,8 @@
-var React = require("react");
-var ReactDOM = require('react-dom');
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import _ from "lodash";
 
-var utils = require("../utils.js");
+import {Key} from "../utils.js";
 import {ChildFocus} from "./common.js"
 
 var Prompt = React.createClass({
@@ -21,12 +21,12 @@ var Prompt = React.createClass({
         var opts = this.getOptions();
         for (var i = 0; i < opts.length; i++) {
             var k = opts[i].key;
-            if (utils.Key[k.toUpperCase()] === e.keyCode) {
+            if (Key[k.toUpperCase()] === e.keyCode) {
                 this.done(k);
                 return;
             }
         }
-        if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) {
+        if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) {
             this.done(false);
         }
     },
@@ -98,4 +98,4 @@ var Prompt = React.createClass({
     }
 });
 
-module.exports = Prompt;
\ No newline at end of file
+export default Prompt;
\ No newline at end of file
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index fe3e0008..24f45ff5 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -1,16 +1,15 @@
-var React = require("react");
-var ReactDOM = require("react-dom");
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from "react-dom";
+import _ from "lodash";
 
 import {Router, Splitter} from "./common.js"
-var common = require("./common.js");
-var MainView = require("./mainview.js");
-var Footer = require("./footer.js");
-var header = require("./header.js");
+import MainView from "./mainview.js";
+import Footer from "./footer.js";
+import {Header, MainMenu} from "./header.js";
 import EventLog from "./eventlog.js"
-var store = require("../store/store.js");
-var Query = require("../actions.js").Query;
-var Key = require("../utils.js").Key;
+import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js";
+import {Query} from "../actions.js";
+import {Key} from "../utils.js";
 
 
 //TODO: Move out of here, just a stub.
@@ -43,9 +42,9 @@ var ProxyAppMain = React.createClass({
         };
     },
     getInitialState: function () {
-        var eventStore = new store.EventLogStore();
-        var flowStore = new store.FlowStore();
-        var settingsStore = new store.SettingsStore();
+        var eventStore = new EventLogStore();
+        var flowStore = new FlowStore();
+        var settingsStore = new SettingsStore();
 
         // Default Settings before fetch
         _.extend(settingsStore.dict, {});
@@ -65,7 +64,7 @@ var ProxyAppMain = React.createClass({
 
         var selectFilterInput = function (name) {
             var headerComponent = this.refs.header;
-            headerComponent.setState({active: header.MainMenu}, function () {
+            headerComponent.setState({active: MainMenu}, function () {
                 headerComponent.refs.active.refs[name].select();
             });
         }.bind(this);
@@ -105,7 +104,7 @@ var ProxyAppMain = React.createClass({
         );
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
-                <header.Header ref="header"/>
+                <Header ref="header"/>
                 {children}
                 {eventlog}
                 <Footer/>
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
index 5e229b6e..6177938e 100644
--- a/web/src/js/connection.js
+++ b/web/src/js/connection.js
@@ -1,6 +1,6 @@
 
-var actions = require("./actions.js");
-var AppDispatcher = require("./dispatcher.js").AppDispatcher;
+import {ConnectionActions, EventLogActions} from "./actions.js";
+import {AppDispatcher} from "./dispatcher.js";
 
 function Connection(url) {
     if (url[0] === "/") {
@@ -9,21 +9,21 @@ function Connection(url) {
 
     var ws = new WebSocket(url);
     ws.onopen = function () {
-        actions.ConnectionActions.open();
+        ConnectionActions.open();
     };
     ws.onmessage = function (message) {
         var m = JSON.parse(message.data);
         AppDispatcher.dispatchServerAction(m);
     };
     ws.onerror = function () {
-        actions.ConnectionActions.error();
-        actions.EventLogActions.add_event("WebSocket connection error.");
+        ConnectionActions.error();
+        EventLogActions.add_event("WebSocket connection error.");
     };
     ws.onclose = function () {
-        actions.ConnectionActions.close();
-        actions.EventLogActions.add_event("WebSocket connection closed.");
+        ConnectionActions.close();
+        EventLogActions.add_event("WebSocket connection closed.");
     };
     return ws;
 }
 
-module.exports = Connection;
\ No newline at end of file
+export default Connection;
\ No newline at end of file
diff --git a/web/src/js/dispatcher.js b/web/src/js/dispatcher.js
index 0c2aa202..b4e22ed9 100644
--- a/web/src/js/dispatcher.js
+++ b/web/src/js/dispatcher.js
@@ -1,5 +1,5 @@
 
-var flux = require("flux");
+import flux from "flux";
 
 const PayloadSources = {
     VIEW: "view",
@@ -7,7 +7,7 @@ const PayloadSources = {
 };
 
 
-var AppDispatcher = new flux.Dispatcher();
+export var AppDispatcher = new flux.Dispatcher();
 AppDispatcher.dispatchViewAction = function (action) {
     action.source = PayloadSources.VIEW;
     this.dispatch(action);
@@ -15,8 +15,4 @@ AppDispatcher.dispatchViewAction = function (action) {
 AppDispatcher.dispatchServerAction = function (action) {
     action.source = PayloadSources.SERVER;
     this.dispatch(action);
-};
-
-module.exports = {
-    AppDispatcher: AppDispatcher
 };
\ No newline at end of file
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index d72febaa..d64e2d55 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -1,12 +1,12 @@
-var _ = require("lodash");
-var $ = require("jquery");
+import _ from "lodash";
+import $ from "jquery";
 
 var defaultPorts = {
     "http": 80,
     "https": 443
 };
 
-var MessageUtils = {
+export var MessageUtils = {
     getContentType: function (message) {
         var ct = this.get_first_header(message, /^Content-Type$/i);
         if(ct){
@@ -58,7 +58,7 @@ var MessageUtils = {
     }
 };
 
-var RequestUtils = _.extend(MessageUtils, {
+export var RequestUtils = _.extend(MessageUtils, {
     pretty_host: function (request) {
         //FIXME: Add hostheader
         return request.host;
@@ -72,11 +72,11 @@ var RequestUtils = _.extend(MessageUtils, {
     }
 });
 
-var ResponseUtils = _.extend(MessageUtils, {});
+export var ResponseUtils = _.extend(MessageUtils, {});
 
 
 var parseUrl_regex = /^(?:(https?):\/\/)?([^\/:]+)?(?::(\d+))?(\/.*)?$/i;
-var parseUrl = function (url) {
+export var parseUrl = function (url) {
     //there are many correct ways to parse a URL,
     //however, a mitmproxy user may also wish to generate a not-so-correct URL. ;-)
     var parts = parseUrl_regex.exec(url);
@@ -109,22 +109,13 @@ var parseUrl = function (url) {
 
 
 var isValidHttpVersion_regex = /^HTTP\/\d+(\.\d+)*$/i;
-var isValidHttpVersion = function (httpVersion) {
+export var isValidHttpVersion = function (httpVersion) {
     return isValidHttpVersion_regex.test(httpVersion);
 };
 
-var parseHttpVersion = function (httpVersion) {
+export var parseHttpVersion = function (httpVersion) {
     httpVersion = httpVersion.replace("HTTP/", "").split(".");
     return _.map(httpVersion, function (x) {
         return parseInt(x);
     });
 };
-
-module.exports = {
-    ResponseUtils: ResponseUtils,
-    RequestUtils: RequestUtils,
-    MessageUtils: MessageUtils,
-    parseUrl: parseUrl,
-    parseHttpVersion: parseHttpVersion,
-    isValidHttpVersion: isValidHttpVersion
-};
\ No newline at end of file
diff --git a/web/src/js/store/store.js b/web/src/js/store/store.js
index 5024049f..e41b2eef 100644
--- a/web/src/js/store/store.js
+++ b/web/src/js/store/store.js
@@ -1,11 +1,10 @@
 
-var _ = require("lodash");
-var $ = require("jquery");
-var EventEmitter = require('events').EventEmitter;
+import _ from "lodash";
+import $ from "jquery";
+import {EventEmitter} from 'events';
 
-var utils = require("../utils.js");
-var actions = require("../actions.js");
-var dispatcher = require("../dispatcher.js");
+import {ActionTypes, StoreCmds} from "../actions.js";
+import {AppDispatcher} from "../dispatcher.js";
 
 
 function ListStore() {
@@ -79,7 +78,7 @@ function LiveStoreMixin(type) {
     this._fetchxhr = false;
 
     this.handle = this.handle.bind(this);
-    dispatcher.AppDispatcher.register(this.handle);
+    AppDispatcher.register(this.handle);
 
     // Avoid double-fetch on startup.
     if (!(window.ws && window.ws.readyState === WebSocket.CONNECTING)) {
@@ -88,11 +87,11 @@ function LiveStoreMixin(type) {
 }
 _.extend(LiveStoreMixin.prototype, {
     handle: function (event) {
-        if (event.type === actions.ActionTypes.CONNECTION_OPEN) {
+        if (event.type === ActionTypes.CONNECTION_OPEN) {
             return this.fetch();
         }
         if (event.type === this.type) {
-            if (event.cmd === actions.StoreCmds.RESET) {
+            if (event.cmd === StoreCmds.RESET) {
                 this.fetch(event.data);
             } else if (this._updates_before_fetch) {
                 console.log("defer update", event);
@@ -103,7 +102,7 @@ _.extend(LiveStoreMixin.prototype, {
         }
     },
     close: function () {
-        dispatcher.AppDispatcher.unregister(this.handle);
+        AppDispatcher.unregister(this.handle);
     },
     fetch: function (data) {
         console.log("fetch " + this.type);
@@ -148,16 +147,16 @@ function LiveDictStore(type) {
 _.extend(LiveDictStore.prototype, DictStore.prototype, LiveStoreMixin.prototype);
 
 
-function FlowStore() {
-    return new LiveListStore(actions.ActionTypes.FLOW_STORE);
+export function FlowStore() {
+    return new LiveListStore(ActionTypes.FLOW_STORE);
 }
 
-function SettingsStore() {
-    return new LiveDictStore(actions.ActionTypes.SETTINGS_STORE);
+export function SettingsStore() {
+    return new LiveDictStore(ActionTypes.SETTINGS_STORE);
 }
 
-function EventLogStore() {
-    LiveListStore.call(this, actions.ActionTypes.EVENT_STORE);
+export function EventLogStore() {
+    LiveListStore.call(this, ActionTypes.EVENT_STORE);
 }
 _.extend(EventLogStore.prototype, LiveListStore.prototype, {
     fetch: function(){
@@ -172,10 +171,3 @@ _.extend(EventLogStore.prototype, LiveListStore.prototype, {
         }
     }
 });
-
-
-module.exports = {
-    EventLogStore: EventLogStore,
-    SettingsStore: SettingsStore,
-    FlowStore: FlowStore
-};
\ No newline at end of file
diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js
index d628d46b..71b159bf 100644
--- a/web/src/js/store/view.js
+++ b/web/src/js/store/view.js
@@ -1,7 +1,7 @@
-var EventEmitter = require('events').EventEmitter;
-var _ = require("lodash");
+import {EventEmitter} from 'events';
+import _ from "lodash";
 
-var utils = require("../utils.js");
+import utils from "../utils.js";
 
 function SortByStoreOrder(elem) {
     return this.store.index(elem.id);
@@ -12,7 +12,7 @@ var default_filt = function (elem) {
     return true;
 };
 
-function StoreView(store, filt, sortfun) {
+export function StoreView(store, filt, sortfun) {
     EventEmitter.call(this);
 
     this.store = store;
@@ -109,7 +109,3 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
         }
     }
 });
-
-module.exports = {
-    StoreView: StoreView
-};
\ No newline at end of file
diff --git a/web/src/js/tests/utils.js b/web/src/js/tests/utils.js
index dfbb9ba6..1b6de264 100644
--- a/web/src/js/tests/utils.js
+++ b/web/src/js/tests/utils.js
@@ -2,14 +2,14 @@ jest.dontMock("jquery");
 jest.dontMock("../utils");
 
 describe("utils", function () {
-    var utils = require("../utils");
+    import {formatSize} from "../utils.js"
     it("formatSize", function(){
-        expect(utils.formatSize(1024)).toEqual("1kb");
-        expect(utils.formatSize(0)).toEqual("0");
-        expect(utils.formatSize(10)).toEqual("10b");
-        expect(utils.formatSize(1025)).toEqual("1.0kb");
-        expect(utils.formatSize(1024*1024)).toEqual("1mb");
-        expect(utils.formatSize(1024*1024+1)).toEqual("1.0mb");
+        expect(formatSize(1024)).toEqual("1kb");
+        expect(formatSize(0)).toEqual("0");
+        expect(formatSize(10)).toEqual("10b");
+        expect(formatSize(1025)).toEqual("1.0kb");
+        expect(formatSize(1024*1024)).toEqual("1mb");
+        expect(formatSize(1024*1024+1)).toEqual("1.0mb");
     });
 });
 
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index 40575692..2627cf58 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -1,12 +1,12 @@
-var $ = require("jquery");
-var _ = require("lodash");
-var actions = require("./actions.js");
+import $ from "jquery";
+import _ from "lodash";
+import actions from "./actions.js";
 
 window.$ = $;
 window._ = _;
 window.React = require("react");
 
-var Key = {
+export var Key = {
     UP: 38,
     DOWN: 40,
     PAGE_UP: 33,
@@ -28,7 +28,7 @@ for (var i = 65; i <= 90; i++) {
 }
 
 
-var formatSize = function (bytes) {
+export var formatSize = function (bytes) {
     if (bytes === 0)
         return "0";
     var prefix = ["b", "kb", "mb", "gb", "tb"];
@@ -46,7 +46,7 @@ var formatSize = function (bytes) {
 };
 
 
-var formatTimeDelta = function (milliseconds) {
+export var formatTimeDelta = function (milliseconds) {
     var time = milliseconds;
     var prefix = ["ms", "s", "min", "h"];
     var div = [1000, 60, 60];
@@ -59,7 +59,7 @@ var formatTimeDelta = function (milliseconds) {
 };
 
 
-var formatTimeStamp = function (seconds) {
+export var formatTimeStamp = function (seconds) {
     var ts = (new Date(seconds * 1000)).toISOString();
     return ts.replace("T", " ").replace("Z", "");
 };
@@ -68,7 +68,7 @@ var formatTimeStamp = function (seconds) {
 // but we can only provide a key function.
 // This beauty "reverses" a JS string.
 var end = String.fromCharCode(0xffff);
-function reverseString(s) {
+export function reverseString(s) {
     return String.fromCharCode.apply(String,
             _.map(s.split(""), function (c) {
                 return 0xffff - c.charCodeAt(0);
@@ -101,12 +101,4 @@ $(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
     console.error(thrownError, message, arguments);
     actions.EventLogActions.add_event(thrownError + ": " + message);
     alert(message);
-});
-
-module.exports = {
-    formatSize: formatSize,
-    formatTimeDelta: formatTimeDelta,
-    formatTimeStamp: formatTimeStamp,
-    reverseString: reverseString,
-    Key: Key,
-};
\ No newline at end of file
+});
\ No newline at end of file