Add panel to transform code.

(cherry-picked f92ab58 from @cpojer)
fkling · Jul 30, 2015 · c69d857 · c69d857
1 parent d7b76e3
commit c69d857
Show file tree

Hide file tree

Showing 9 changed files with 254 additions and 40 deletions.
diff --git a/app.js b/app.js
diff --git a/css/style.css b/css/style.css
@@ -139,7 +139,17 @@ html {
   cursor: col-resize;
 }
 
-#output {
+.splitpane.splitpane-top {
+  bottom: 50%;
+}
+
+.splitpane.splitpane-bottom {
+  border-top: solid 2px #ddd;
+  top: 50%;
+  bottom: 0;
+}
+
+.output {
   box-sizing: border-box;
   position: absolute;
   top: 0;
@@ -150,13 +160,13 @@ html {
   border: none;
 }
 
-#output > .toolbar {
+.output > .toolbar {
   font-size: 14px;
   margin-left: -1px;
   border-bottom: 1px solid #ddd;
 }
 
-#output > .toolbar > button {
+.output > .toolbar > button {
   margin: 0;
   height: 100%;
   min-width: 90px;
@@ -171,13 +181,13 @@ html {
   cursor: pointer;
 }
 
-#output > .toolbar > button.active {
+.output > .toolbar > button.active {
   border-color: #999;
   background-color: #999;
   color: #f5f5f5;
 }
 
-#output > .container {
+.output > .container {
   overflow: auto;
   position: absolute;
   top: 25px;
@@ -211,7 +221,7 @@ html {
   background-color: #efefef;
 }
 
-#Editor {
+.editor {
   position: absolute;
   left: 0;
   right: 0;
@@ -280,7 +290,7 @@ li.entry {
   overflow: auto;
 }
 
-#Editor .CodeMirror-gutters {
+.editor .CodeMirror-gutters {
   background-color: white;
   border: none;
 }
diff --git a/package.json b/package.json
@@ -24,9 +24,10 @@
     "codemirror": "^5.1.0",
     "escodegen": "^1.4.1",
     "esprima-fb": "^15001.1.0-dev-harmony-fb",
+    "jscodeshift": "^0.3",
     "keypress": "git://github.com/dmauro/Keypress",
     "pubsub-js": "^1.4.2",
-    "react": "^0.12.1",
+    "react": "^0.13.1",
     "react-tools": "^0.12.x"
   },
   "browserify": {

diff --git a/src/ASTOutput.js b/src/ASTOutput.js
@@ -63,7 +63,7 @@ var ASTOutput = React.createClass({
     }
 
     return (
-      <div id="output" className="highlight">
+      <div className="output highlight">
         <div className="toolbar">
           <button
             onClick={this._changeOutput}

diff --git a/src/Editor.js b/src/Editor.js
@@ -10,6 +10,20 @@ var keypress = require('keypress').keypress;
 
 var Editor = React.createClass({
 
+  propTypes: {
+    highlight: React.PropTypes.bool,
+    lineNumbers: React.PropTypes.bool,
+    readOnly: React.PropTypes.bool,
+  },
+
+  getDefaultProps: function() {
+    return {
+      highlight: true,
+      lineNumbers: true,
+      readOnly: false,
+    }
+  },
+
   getValue: function() {
     return this.codeMirror && this.codeMirror.getValue();
   },
@@ -31,7 +45,8 @@ var Editor = React.createClass({
       this.refs.container.getDOMNode(),
       {
         value: this.props.value,
-        lineNumbers: true
+        lineNumbers: this.props.lineNumbers,
+        readOnly: this.props.readOnly
       }
     );
 
@@ -55,41 +70,45 @@ var Editor = React.createClass({
       }
     });
 
-    this._markerRange = null;
-    this._mark = null;
     this._subscriptions.push(
-      PubSub.subscribe('CM.HIGHLIGHT', (_, range) => {
-        var doc = this.codeMirror.getDoc();
-        this._markerRange = range;
-        // We only want one mark at a time.
-        if (this._mark) this._mark.clear();
-        this._mark = this.codeMirror.markText(
-          doc.posFromIndex(range[0]),
-          doc.posFromIndex(range[1]),
-          {className: 'marked'}
-        );
-      }),
-
-      PubSub.subscribe('CM.CLEAR_HIGHLIGHT', (_, range) => {
-        if (!range ||
-          this._markerRange &&
-          range[0] === this._markerRange[0] &&
-          range[1] === this._markerRange[1]
-        ) {
-          this._markerRange = null;
-          if (this._mark) {
-            this._mark.clear();
-            this._mark = null;
-          }
-        }
-      }),
-
       PubSub.subscribe('PANEL_RESIZE', () => {
         if (this.codeMirror) {
           this.codeMirror.refresh();
         }
       })
     );
+
+    if (this.props.highlight) {
+      this._markerRange = null;
+      this._mark = null;
+      this._subscriptions.push(
+        PubSub.subscribe('CM.HIGHLIGHT', (_, range) => {
+          var doc = this.codeMirror.getDoc();
+          this._markerRange = range;
+          // We only want one mark at a time.
+          if (this._mark) this._mark.clear();
+          this._mark = this.codeMirror.markText(
+            doc.posFromIndex(range[0]),
+            doc.posFromIndex(range[1]),
+            {className: 'marked'}
+          );
+        }),
+
+        PubSub.subscribe('CM.CLEAR_HIGHLIGHT', (_, range) => {
+          if (!range ||
+            this._markerRange &&
+            range[0] === this._markerRange[0] &&
+            range[1] === this._markerRange[1]
+          ) {
+            this._markerRange = null;
+            if (this._mark) {
+              this._mark.clear();
+              this._mark = null;
+            }
+          }
+        })
+      );
+    }
   },
 
   componentWillUnmount: function() {
@@ -132,7 +151,7 @@ var Editor = React.createClass({
 
   render: function() {
     return (
-      <div id="Editor" ref="container" />
+      <div className="editor" ref="container" />
     );
   }
 });

diff --git a/src/Toolbar.js b/src/Toolbar.js
@@ -69,6 +69,20 @@ var Toolbar = React.createClass({
           />
           &nbsp;{this.props.parserName}
         </button>
+        <button
+          type="button"
+          onClick={this.props.onToggleTransform}>
+          <i
+            className={cx({
+              fa: true,
+              'fa-lg': true,
+              'fa-toggle-off': !this.props.transformPanelIsEnabled,
+              'fa-toggle-on': this.props.transformPanelIsEnabled,
+              'fa-fw': true,
+            })}
+          />
+          Transform
+        </button>
         <div id="parser">
           Parser: {this.props.parserName}-{this.props.parserVersion}
         </div>

diff --git a/src/TransformOutput.js b/src/TransformOutput.js
@@ -0,0 +1,74 @@
+/**
+ * @jsx React.DOM
+ */
+"use strict";
+
+var Editor = require('./Editor');
+var React = require('react/addons');
+
+var babel = require('babel');
+var jscodeshift = require('jscodeshift');
+
+var cx = React.addons.classSet;
+
+var TransformOutput = React.createClass({
+  mixins: [React.addons.PureRenderMixin],
+
+  propTypes: {
+    transform: React.PropTypes.string,
+    code: React.PropTypes.string,
+  },
+
+  transform: function() {
+    // This might throw
+    var transform = babel.transform(this.props.transform).code;
+    var module = {};
+    var args = [
+      {
+        path: 'Live.js',
+        source: this.props.code,
+      },
+      {jscodeshift},
+      {}
+    ];
+    return eval([
+      "(function() {",
+      transform,
+      "})();",
+      "module.exports.apply(module.exports, args);"
+    ].join("\n"));
+  },
+
+  renderTransform: function() {
+    try {
+      return (
+        <Editor
+          highlight={false}
+          key="output"
+          readOnly={true}
+          value={this.transform()}
+        />
+      );
+    } catch (e) {
+      return (
+        <Editor
+          highlight={false}
+          key="error"
+          lineNumbers={false}
+          readOnly={true}
+          value={e.message}
+        />
+      );
+    }
+  },
+
+  render: function() {
+    return (
+      <div className="output highlight">
+        {this.renderTransform()}
+      </div>
+    );
+  }
+});
+
+module.exports = TransformOutput;
diff --git a/src/app.js b/src/app.js
@@ -14,6 +14,7 @@ var React = require('react/addons');
 var Snippet = require('./Snippet');
 var SplitPane = require('./SplitPane');
 var Toolbar = require('./Toolbar');
+var TransformOutput = require('./TransformOutput');
 
 var babel;
 var getFocusPath = require('./getFocusPath');
@@ -22,6 +23,8 @@ var fs = require('fs');
 var keypress = require('keypress').keypress;
 
 var initialCode = fs.readFileSync(__dirname + '/codeExample.txt', 'utf8');
+var initialTransform =
+  fs.readFileSync(__dirname + '/transformExample.txt', 'utf8');
 
 function updateHashWithIDAndRevision(id, rev) {
   global.location.hash = '/' + id + (rev && rev !== 0 ? '/' + rev : '');
@@ -41,6 +44,8 @@ var App = React.createClass({
       focusPath: [],
       content: revision && revision.get('code') || initialCode,
       snippet: snippet,
+      showTransformPanel: false,
+      transformContent: initialTransform,
       revision: revision,
       parser: 'esprima-fb',
     };
@@ -166,6 +171,13 @@ var App = React.createClass({
     );
   },
 
+  onTransformContentChange: function(data) {
+    var content = data.value;
+    this.setState({
+      transformContent: content
+    });
+  },
+
   onActivity: function(cursorPos) {
     this.setState({
       focusPath: getFocusPath(this.state.ast, cursorPos)
@@ -250,8 +262,16 @@ var App = React.createClass({
     return this.state.parser === 'esprima-fb' ? esprima : babel;
   },
 
+  _onToggleTransform: function() {
+    this.setState({
+      showTransformPanel: !this.state.showTransformPanel,
+    });
+  },
+
   render: function() {
     var revision = this.state.revision;
+    var splitPaneClassName =
+      'splitpane' + (this.state.showTransformPanel ? ' splitpane-top' : '');
     return (
       <PasteDropTarget
         className="dropTarget"
@@ -268,17 +288,19 @@ var App = React.createClass({
           onSave={this._onSave}
           onFork={this._onFork}
           onParserChange={this._onParserChange}
+          onToggleTransform={this._onToggleTransform}
           canSave={
             this.state.content !== initialCode && !revision ||
             revision && revision.get('code') !== this.state.content
           }
           canFork={!!revision}
           parserName={this.state.parser}
           parserVersion={this._getParser().version}
+          transformPanelIsEnabled={this.state.showTransformPanel}
         />
         {this.state.error ? <ErrorMessage message={this.state.error} /> : null}
         <SplitPane
-          className="splitpane"
+          className={splitPaneClassName}
           onResize={this._onResize}>
           <Editor
             ref="editor"
@@ -292,6 +314,19 @@ var App = React.createClass({
             ast={this.state.ast}
           />
         </SplitPane>
+        {this.state.showTransformPanel ? <SplitPane
+          className="splitpane splitpane-bottom"
+          onResize={this._onResize}>
+          <Editor
+            highlight={false}
+            value={this.state.transformContent}
+            onContentChange={this.onTransformContentChange}
+          />
+          <TransformOutput
+            transform={this.state.transformContent}
+            code={this.state.content}
+          />
+        </SplitPane> : null}
       </PasteDropTarget>
     );
   }