From 6efe1aa6a92ce7f9f264903e9d27fb5cf6c32bfe Mon Sep 17 00:00:00 2001 From: Aldo Cortesi Date: Tue, 16 Sep 2014 16:26:16 +1200 Subject: [PATCH] We're not ready for ES6 Lets re-evaluate in June next year when it's actually released --- .gitignore | 3 +- libmproxy/web/static/js/app.js | 74 ++++++++++--------- web/gulpfile.js | 24 +++--- web/src/js/{actions.es6.js => actions.js} | 4 +- .../{EventLog.react.js => eventlog.jsx} | 17 +++-- .../{Footer.react.js => footer.jsx} | 4 +- .../{Header.react.js => header.jsx} | 18 ++--- .../{ProxyApp.react.js => proxyapp.jsx} | 20 ++--- ...TrafficTable.react.js => traffictable.jsx} | 12 +-- .../js/{Connection.es6.js => connection.js} | 31 ++++---- .../js/{Dispatcher.es6.js => dispatcher.js} | 22 +++--- web/src/js/stores/SettingsStore.es6.js | 27 ------- web/src/js/stores/{base.es6.js => base.js} | 16 ++-- ...{EventLogStore.es6.js => eventlogstore.js} | 46 ++++++------ web/src/js/stores/settingstore.js | 27 +++++++ 15 files changed, 176 insertions(+), 169 deletions(-) rename web/src/js/{actions.es6.js => actions.js} (92%) rename web/src/js/components/{EventLog.react.js => eventlog.jsx} (70%) rename web/src/js/components/{Footer.react.js => footer.jsx} (90%) rename web/src/js/components/{Header.react.js => header.jsx} (90%) rename web/src/js/components/{ProxyApp.react.js => proxyapp.jsx} (68%) rename web/src/js/components/{TrafficTable.react.js => traffictable.jsx} (82%) rename web/src/js/{Connection.es6.js => connection.js} (57%) rename web/src/js/{Dispatcher.es6.js => dispatcher.js} (68%) delete mode 100644 web/src/js/stores/SettingsStore.es6.js rename web/src/js/stores/{base.es6.js => base.js} (67%) rename web/src/js/stores/{EventLogStore.es6.js => eventlogstore.js} (53%) create mode 100644 web/src/js/stores/settingstore.js diff --git a/.gitignore b/.gitignore index d75774f37..e1d46dc1d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.DS_Store MANIFEST /build /dist @@ -23,4 +24,4 @@ libpathod node_modules bower_components *.compiled.js -*.map \ No newline at end of file +*.map diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index dbaa5cb4b..991f9af31 100644 --- a/libmproxy/web/static/js/app.js +++ b/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
{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}
; }); */ @@ -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() { - var messages = this.state.log.map(function(row) {return React.DOM.div({key: row.id}, row.message);}); + render: function() { + //var messages = this.state.log.map(row => (
{row.message}
)); + 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}), - React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), - this.state.settings.showEventLog ? EventLog(null) : null, - Footer({settings: this.state.settings}) + Header({settings: this.state.settings}), + React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), + this.state.settings.showEventLog ? EventLog(null) : null, + Footer({settings: this.state.settings}) ) ); } diff --git a/web/gulpfile.js b/web/gulpfile.js index 6f72016bf..50c1a3faf 100644 --- a/web/gulpfile.js +++ b/web/gulpfile.js @@ -32,17 +32,17 @@ var path = { 'vendor/react-bootstrap/react-bootstrap.js' ], app: [ - 'js/Dispatcher.es6.js', - 'js/actions.es6.js', - 'js/stores/base.es6.js', - 'js/stores/SettingsStore.es6.js', - 'js/stores/EventLogStore.es6.js', - 'js/Connection.es6.js', - 'js/components/Header.react.js', - 'js/components/TrafficTable.react.js', - 'js/components/EventLog.react.js', - 'js/components/Footer.react.js', - 'js/components/ProxyApp.react.js', + 'js/dispatcher.js', + 'js/actions.js', + 'js/stores/base.js', + 'js/stores/settingstore.js', + 'js/stores/eventlogstore.js', + 'js/connection.js', + 'js/components/header.jsx', + 'js/components/traffictable.jsx', + 'js/components/eventlog.jsx', + 'js/components/footer.jsx', + '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()) diff --git a/web/src/js/actions.es6.js b/web/src/js/actions.js similarity index 92% rename from web/src/js/actions.es6.js rename to web/src/js/actions.js index 55cb45524..6eecd78e6 100644 --- a/web/src/js/actions.es6.js +++ b/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 }); } -}; \ No newline at end of file +}; diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/eventlog.jsx similarity index 70% rename from web/src/js/components/EventLog.react.js rename to web/src/js/components/eventlog.jsx index 6c7a7c587..530e9f4f9 100644 --- a/web/src/js/components/EventLog.react.js +++ b/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() { - var messages = this.state.log.map(row => (
{row.message}
)); + render: function() { + //var messages = this.state.log.map(row => (
{row.message}
)); + var messages = []; return (
@@ -35,4 +36,4 @@ var EventLog = React.createClass({
             
); } -}); \ No newline at end of file +}); diff --git a/web/src/js/components/Footer.react.js b/web/src/js/components/footer.jsx similarity index 90% rename from web/src/js/components/Footer.react.js rename to web/src/js/components/footer.jsx index 20a4abfbf..6d5b75a18 100644 --- a/web/src/js/components/Footer.react.js +++ b/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 ( ); } -}); \ No newline at end of file +}); diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/header.jsx similarity index 90% rename from web/src/js/components/Header.react.js rename to web/src/js/components/header.jsx index 0131d3509..e63501717 100644 --- a/web/src/js/components/Header.react.js +++ b/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 (