├── .gitignore
├── README.md
├── code-mirror-editor.js
├── code-mirror-highlight.js
├── code-mirror-highlighting
    ├── jsparser.js
    ├── stringstream.js
    ├── tokenizejs.js
    └── tokenizer.js
├── edit.js
├── index.html
├── index.js
├── live-compile.js
├── live-editor.gif
├── live-editor.js
├── package.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # live coding react components
 2 | 
 3 | This repo provides one webpage and three components.
 4 | 
 5 | ## index.html
 6 | 
 7 | A simple example of `<LiveEditor>` in use.
 8 | 
 9 | ## code-mirror-editor.js
10 | 
11 | A code mirror react component (called `<CodeMirrorEditor>` since code mirror took the name `CodeMirror`).
12 | 
13 | ## live-compile.js
14 | 
15 | Dynamic compilation of react components.
16 | 
17 | ## live-editor.js
18 | 
19 | Combination of `<CodeMirrorEditor>` and `<ComponentPreview>` which live-compiles what you type!
20 | 
21 | # Running the demo
22 | 
23 | ```
24 | > webpack
25 | > open index.html
26 | ```
27 | 
28 | You should see something like this:
29 | 
30 | ![](live-editor.gif)
31 | 


--------------------------------------------------------------------------------
/code-mirror-editor.js:
--------------------------------------------------------------------------------
  1 | var React = require("react");
  2 | var CodeMirror = require('codemirror');
  3 | require('codemirror/mode/javascript/javascript');
  4 | require('codemirror/addon/fold/foldcode');
  5 | import CodeMirrorHighlight from './code-mirror-highlight';
  6 | 
  7 | 
  8 | var IS_MOBILE = (
  9 |   navigator.userAgent.match(/Android/i)
 10 |     || navigator.userAgent.match(/webOS/i)
 11 |     || navigator.userAgent.match(/iPhone/i)
 12 |     || navigator.userAgent.match(/iPad/i)
 13 |     || navigator.userAgent.match(/iPod/i)
 14 |     || navigator.userAgent.match(/BlackBerry/i)
 15 |     || navigator.userAgent.match(/Windows Phone/i)
 16 | );
 17 | 
 18 | var OPEN_MARK = /{{{/;
 19 | var CLOSE_MARK = /}}}/;
 20 | 
 21 | CodeMirror.registerGlobalHelper('fold', 'marked',
 22 |     function(mode, mirror) {
 23 |         return mode.name === 'javascript';
 24 |     },
 25 |     function(mirror, start) {
 26 |         var lineNo = start.line;
 27 |         var lineText = mirror.getLine(lineNo);
 28 |         var lineCount = mirror.lineCount();
 29 | 
 30 |         var openMatch = OPEN_MARK.exec(lineText);
 31 |         var closeMatch = CLOSE_MARK.exec(lineText);
 32 | 
 33 |         if (openMatch) {
 34 |             // search forwards
 35 |             for (var i = lineNo; i < lineCount; i++) {
 36 |                 closeMatch = CLOSE_MARK.exec(mirror.getLine(i));
 37 |                 if (closeMatch) {
 38 |                     return {
 39 |                         from: CodeMirror.Pos(lineNo, openMatch.index),
 40 |                         to: CodeMirror.Pos(i, closeMatch.index + 3)
 41 |                     };
 42 |                 }
 43 |             }
 44 | 
 45 |         } else if (closeMatch) {
 46 |             // search backwards
 47 |             for (var i = lineNo; i >= 0; i--) {
 48 |                 openMatch = OPEN_MARK.exec(mirror.getLine(i));
 49 |                 if (openMatch) {
 50 |                     return {
 51 |                         from: CodeMirror.Pos(i, openMatch.index),
 52 |                         to: CodeMirror.Pos(lineNo, closeMatch.index + 3)
 53 |                     };
 54 |                 }
 55 |             }
 56 |         }
 57 |     }
 58 | );
 59 | 
 60 | var CodeMirrorEditor = React.createClass({
 61 |   getDefaultProps() {
 62 |     return {
 63 |       renderType: IS_MOBILE ? 'pre' : 'textarea',
 64 |     }
 65 |   },
 66 | 
 67 |   componentDidMount: function() {
 68 |     if (this.props.renderType === 'textarea') {
 69 |       this.instantiateTextarea();
 70 |     }
 71 |   },
 72 | 
 73 |   instantiateTextarea() {
 74 |     this.editor = CodeMirror.fromTextArea(this.refs.editor, {
 75 |       mode: 'javascript',
 76 |       lineNumbers: false,
 77 |       lineWrapping: true,
 78 |       smartIndent: false,  // javascript mode does bad things with jsx indents
 79 |       matchBrackets: true,
 80 |       theme: 'solarized-light',
 81 |       readOnly: this.props.readOnly
 82 |     });
 83 |     this.editor.foldCode(0, { widget: '...' });
 84 |     this.editor.on('change', this.handleChange);
 85 | 
 86 |     this.editor.on('beforeSelectionChange', (instance, obj) => {
 87 |         // why is ranges plural?
 88 |         var selection = obj.ranges ?
 89 |             obj.ranges[0] :
 90 |             obj;
 91 | 
 92 |         var noRange = selection.anchor.ch === selection.head.ch &&
 93 |                       selection.anchor.line === selection.head.line;
 94 |         if (!noRange) {
 95 |             return;
 96 |         }
 97 | 
 98 |         var cursor = selection.anchor;
 99 |         var line = instance.getLine(cursor.line);
100 |         var match = OPEN_MARK.exec(line) || CLOSE_MARK.exec(line);
101 | 
102 |             // the opening or closing mark appears on this line
103 |         if (match &&
104 |             // and the cursor is on it
105 |             // (this is buggy if both occur on the same line)
106 |             cursor.ch >= match.index &&
107 |             cursor.ch < match.index + 3) {
108 | 
109 |                 // TODO(joel) - figure out why this doesn't fold although it
110 |                 // seems like it should work.
111 |                 instance.foldCode(cursor, { widget: '...' });
112 |         }
113 |     });
114 |   },
115 | 
116 |   componentDidUpdate: function() {
117 |     if (this.props.readOnly) {
118 |       this.editor.setValue(this.props.codeText);
119 |     }
120 |   },
121 | 
122 |   handleChange: function() {
123 |     if (!this.props.readOnly && this.props.onChange) {
124 |       this.props.onChange(this.editor.getValue());
125 |     }
126 |   },
127 | 
128 |   render: function() {
129 |     // wrap in a div to fully contain CodeMirror
130 |     var editor;
131 | 
132 |     if (this.props.renderType === 'pre') {
133 |       editor = <CodeMirrorHighlight codeText={this.props.codeText} />;
134 |     } else {
135 |       editor = <textarea ref="editor" defaultValue={this.props.codeText} />;
136 |     }
137 | 
138 |     return (
139 |       <div style={this.props.style} className={this.props.className}>
140 |         {editor}
141 |       </div>
142 |     );
143 |   }
144 | });
145 | 
146 | module.exports = CodeMirrorEditor;
147 | 


--------------------------------------------------------------------------------
/code-mirror-highlight.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import CodeMirror from 'codemirror';
 3 | import JSParser from './code-mirror-highlighting/jsparser';
 4 | import stringStream from './code-mirror-highlighting/stringstream';
 5 | 
 6 | const indentUnit = 2;
 7 | 
 8 | function normaliseString(string) {
 9 |   var tab = "";
10 |   for (var i = 0; i < indentUnit; i++) tab += " ";
11 | 
12 |   string = string.replace(/\t/g, tab).replace(/\u00a0/g, " ").replace(/\r\n?/g, "\n");
13 |   var pos = 0, parts = [], lines = string.split("\n");
14 |   for (var line = 0; line < lines.length; line++) {
15 |     if (line != 0) parts.push("\n");
16 |     parts.push(lines[line]);
17 |   }
18 | 
19 |   return {
20 |     next: function() {
21 |       if (pos < parts.length) return parts[pos++];
22 |       else throw StopIteration;
23 |     }
24 |   };
25 | }
26 | 
27 | function highlightText(string, callback) {
28 |   const parser = JSParser.make(stringStream(normaliseString(string)));
29 |   const result = [];
30 |   let i = 0;
31 |   try {
32 |     while (true) {
33 |       var token = parser.next();
34 |       result.push(
35 |         token.value === '\n'
36 |           ? <br key={i} />
37 |           : <span key={i} className={token.style}>{token.value}</span>
38 |       );
39 |       i++;
40 |     }
41 |   }
42 |   catch (e) {
43 |     if (e != StopIteration) throw e;
44 |   }
45 |   return result;
46 | }
47 | 
48 | export default function CodeMirrorHighlight({codeText}) {
49 |   return (
50 |     <pre
51 |       style={{overflow: 'scroll'}}
52 |       className="CodeMirror cm-s-solarized-light"
53 |     >
54 |       {highlightText(codeText)}
55 |     </pre>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/code-mirror-highlighting/jsparser.js:
--------------------------------------------------------------------------------
  1 | /* Parse function for JavaScript. Makes use of the tokenizer from
  2 |  * tokenizejavascript.js. Note that your parsers do not have to be
  3 |  * this complicated -- if you don't want to recognize local variables,
  4 |  * in many languages it is enough to just look for braces, semicolons,
  5 |  * parentheses, etc, and know when you are inside a string or comment.
  6 |  *
  7 |  * See manual.html for more info about the parser interface.
  8 |  */
  9 | var tokenizeJavaScript = require('./tokenizejs').default;
 10 | 
 11 | var indentUnit = 2;
 12 | 
 13 | var JSParser = (function() {
 14 |   // Token types that can be considered to be atoms.
 15 |   var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true};
 16 |   // Setting that can be used to have JSON data indent properly.
 17 |   var json = false;
 18 |   // Constructor for the lexical context objects.
 19 |   function JSLexical(indented, column, type, align, prev, info) {
 20 |     // indentation at start of this line
 21 |     this.indented = indented;
 22 |     // column at which this scope was opened
 23 |     this.column = column;
 24 |     // type of scope ('vardef', 'stat' (statement), 'form' (special form), '[', '{', or '(')
 25 |     this.type = type;
 26 |     // '[', '{', or '(' blocks that have any text after their opening
 27 |     // character are said to be 'aligned' -- any lines below are
 28 |     // indented all the way to the opening character.
 29 |     if (align != null)
 30 |       this.align = align;
 31 |     // Parent scope, if any.
 32 |     this.prev = prev;
 33 |     this.info = info;
 34 |   }
 35 | 
 36 |   // My favourite JavaScript indentation rules.
 37 |   function indentJS(lexical) {
 38 |     return function(firstChars) {
 39 |       var firstChar = firstChars && firstChars.charAt(0), type = lexical.type;
 40 |       var closing = firstChar == type;
 41 |       if (type == "vardef")
 42 |         return lexical.indented + 4;
 43 |       else if (type == "form" && firstChar == "{")
 44 |         return lexical.indented;
 45 |       else if (type == "stat" || type == "form")
 46 |         return lexical.indented + indentUnit;
 47 |       else if (lexical.info == "switch" && !closing)
 48 |         return lexical.indented + (/^(?:case|default)\b/.test(firstChars) ? indentUnit : 2 * indentUnit);
 49 |       else if (lexical.align)
 50 |         return lexical.column - (closing ? 1 : 0);
 51 |       else
 52 |         return lexical.indented + (closing ? 0 : indentUnit);
 53 |     };
 54 |   }
 55 | 
 56 |   // The parser-iterator-producing function itself.
 57 |   function parseJS(input, basecolumn) {
 58 |     // Wrap the input in a token stream
 59 |     var tokens = tokenizeJavaScript(input);
 60 |     // The parser state. cc is a stack of actions that have to be
 61 |     // performed to finish the current statement. For example we might
 62 |     // know that we still need to find a closing parenthesis and a
 63 |     // semicolon. Actions at the end of the stack go first. It is
 64 |     // initialized with an infinitely looping action that consumes
 65 |     // whole statements.
 66 |     var cc = [json ? expressions : statements];
 67 |     // Context contains information about the current local scope, the
 68 |     // variables defined in that, and the scopes above it.
 69 |     var context = null;
 70 |     // The lexical scope, used mostly for indentation.
 71 |     var lexical = new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false);
 72 |     // Current column, and the indentation at the start of the current
 73 |     // line. Used to create lexical scope objects.
 74 |     var column = 0;
 75 |     var indented = 0;
 76 |     // Variables which are used by the mark, cont, and pass functions
 77 |     // below to communicate with the driver loop in the 'next'
 78 |     // function.
 79 |     var consume, marked;
 80 | 
 81 |     // The iterator object.
 82 |     var parser = {next: next, copy: copy};
 83 | 
 84 |     function next(){
 85 |       // Start by performing any 'lexical' actions (adjusting the
 86 |       // lexical variable), or the operations below will be working
 87 |       // with the wrong lexical state.
 88 |       while(cc[cc.length - 1].lex)
 89 |         cc.pop()();
 90 | 
 91 |       // Fetch a token.
 92 |       var token = tokens.next();
 93 | 
 94 |       // Adjust column and indented.
 95 |       if (token.type == "whitespace" && column == 0)
 96 |         indented = token.value.length;
 97 |       column += token.value.length;
 98 |       if (token.content == "\n"){
 99 |         indented = column = 0;
100 |         // If the lexical scope's align property is still undefined at
101 |         // the end of the line, it is an un-aligned scope.
102 |         if (!("align" in lexical))
103 |           lexical.align = false;
104 |         // Newline tokens get an indentation function associated with
105 |         // them.
106 |         token.indentation = indentJS(lexical);
107 |       }
108 |       // No more processing for meaningless tokens.
109 |       if (token.type == "whitespace" || token.type == "comment")
110 |         return token;
111 |       // When a meaningful token is found and the lexical scope's
112 |       // align is undefined, it is an aligned scope.
113 |       if (!("align" in lexical))
114 |         lexical.align = true;
115 | 
116 |       // Execute actions until one 'consumes' the token and we can
117 |       // return it.
118 |       while(true) {
119 |         consume = marked = false;
120 |         // Take and execute the topmost action.
121 |         cc.pop()(token.type, token.content);
122 |         if (consume){
123 |           // Marked is used to change the style of the current token.
124 |           if (marked)
125 |             token.style = marked;
126 |           // Here we differentiate between local and global variables.
127 |           else if (token.type == "variable" && inScope(token.content))
128 |             token.style = "cm-localvariable";
129 |           return token;
130 |         }
131 |       }
132 |     }
133 | 
134 |     // This makes a copy of the parser state. It stores all the
135 |     // stateful variables in a closure, and returns a function that
136 |     // will restore them when called with a new input stream. Note
137 |     // that the cc array has to be copied, because it is contantly
138 |     // being modified. Lexical objects are not mutated, and context
139 |     // objects are not mutated in a harmful way, so they can be shared
140 |     // between runs of the parser.
141 |     function copy(){
142 |       var _context = context, _lexical = lexical, _cc = cc.concat([]), _tokenState = tokens.state;
143 | 
144 |       return function copyParser(input){
145 |         context = _context;
146 |         lexical = _lexical;
147 |         cc = _cc.concat([]); // copies the array
148 |         column = indented = 0;
149 |         tokens = tokenizeJavaScript(input, _tokenState);
150 |         return parser;
151 |       };
152 |     }
153 | 
154 |     // Helper function for pushing a number of actions onto the cc
155 |     // stack in reverse order.
156 |     function push(fs){
157 |       for (var i = fs.length - 1; i >= 0; i--)
158 |         cc.push(fs[i]);
159 |     }
160 |     // cont and pass are used by the action functions to add other
161 |     // actions to the stack. cont will cause the current token to be
162 |     // consumed, pass will leave it for the next action.
163 |     function cont(){
164 |       push(arguments);
165 |       consume = true;
166 |     }
167 |     function pass(){
168 |       push(arguments);
169 |       consume = false;
170 |     }
171 |     // Used to change the style of the current token.
172 |     function mark(style){
173 |       marked = style;
174 |     }
175 | 
176 |     // Push a new scope. Will automatically link the current scope.
177 |     function pushcontext(){
178 |       context = {prev: context, vars: {"this": true, "arguments": true}};
179 |     }
180 |     // Pop off the current scope.
181 |     function popcontext(){
182 |       context = context.prev;
183 |     }
184 |     // Register a variable in the current scope.
185 |     function register(varname){
186 |       if (context){
187 |         mark("cm-variabledef");
188 |         context.vars[varname] = true;
189 |       }
190 |     }
191 |     // Check whether a variable is defined in the current scope.
192 |     function inScope(varname){
193 |       var cursor = context;
194 |       while (cursor) {
195 |         if (cursor.vars[varname])
196 |           return true;
197 |         cursor = cursor.prev;
198 |       }
199 |       return false;
200 |     }
201 | 
202 |     // Push a new lexical context of the given type.
203 |     function pushlex(type, info) {
204 |       var result = function(){
205 |         lexical = new JSLexical(indented, column, type, null, lexical, info)
206 |       };
207 |       result.lex = true;
208 |       return result;
209 |     }
210 |     // Pop off the current lexical context.
211 |     function poplex(){
212 |       if (lexical.type == ")")
213 |         indented = lexical.indented;
214 |       lexical = lexical.prev;
215 |     }
216 |     poplex.lex = true;
217 |     // The 'lex' flag on these actions is used by the 'next' function
218 |     // to know they can (and have to) be ran before moving on to the
219 |     // next token.
220 | 
221 |     // Creates an action that discards tokens until it finds one of
222 |     // the given type.
223 |     function expect(wanted){
224 |       return function expecting(type){
225 |         if (type == wanted) cont();
226 |         else if (wanted == ";") pass();
227 |         else cont(expecting);
228 |         // else cont(arguments.callee);
229 |       };
230 |     }
231 | 
232 |     // Looks for a statement, and then calls itself.
233 |     function statements(type){
234 |       return pass(statement, statements);
235 |     }
236 |     function expressions(type){
237 |       return pass(expression, expressions);
238 |     }
239 |     // Dispatches various types of statements based on the type of the
240 |     // current token.
241 |     function statement(type){
242 |       if (type == "var") cont(pushlex("vardef"), vardef1, expect(";"), poplex);
243 |       else if (type == "keyword a") cont(pushlex("form"), expression, statement, poplex);
244 |       else if (type == "keyword b") cont(pushlex("form"), statement, poplex);
245 |       else if (type == "{") cont(pushlex("}"), block, poplex);
246 |       else if (type == ";") cont();
247 |       else if (type == "function") cont(functiondef);
248 |       else if (type == "for") cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"), poplex, statement, poplex);
249 |       else if (type == "variable") cont(pushlex("stat"), maybelabel);
250 |       else if (type == "switch") cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"), block, poplex, poplex);
251 |       else if (type == "case") cont(expression, expect(":"));
252 |       else if (type == "default") cont(expect(":"));
253 |       else if (type == "catch") cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"), statement, poplex, popcontext);
254 |       else pass(pushlex("stat"), expression, expect(";"), poplex);
255 |     }
256 |     // Dispatch expression types.
257 |     function expression(type){
258 |       if (atomicTypes.hasOwnProperty(type)) cont(maybeoperator);
259 |       else if (type == "function") cont(functiondef);
260 |       else if (type == "keyword c") cont(expression);
261 |       else if (type == "(") cont(pushlex(")"), expression, expect(")"), poplex, maybeoperator);
262 |       else if (type == "operator") cont(expression);
263 |       else if (type == "[") cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
264 |       else if (type == "{") cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
265 |       else cont();
266 |     }
267 |     // Called for places where operators, function calls, or
268 |     // subscripts are valid. Will skip on to the next action if none
269 |     // is found.
270 |     function maybeoperator(type, value){
271 |       if (type == "operator" && /\+\+|--/.test(value)) cont(maybeoperator);
272 |       else if (type == "operator") cont(expression);
273 |       else if (type == ";") pass();
274 |       else if (type == "(") cont(pushlex(")"), commasep(expression, ")"), poplex, maybeoperator);
275 |       else if (type == ".") cont(property, maybeoperator);
276 |       else if (type == "[") cont(pushlex("]"), expression, expect("]"), poplex, maybeoperator);
277 |     }
278 |     // When a statement starts with a variable name, it might be a
279 |     // label. If no colon follows, it's a regular statement.
280 |     function maybelabel(type){
281 |       if (type == ":") cont(poplex, statement);
282 |       else pass(maybeoperator, expect(";"), poplex);
283 |     }
284 |     // Property names need to have their style adjusted -- the
285 |     // tokenizer thinks they are variables.
286 |     function property(type){
287 |       if (type == "variable") {mark("cm-property"); cont();}
288 |     }
289 |     // This parses a property and its value in an object literal.
290 |     function objprop(type){
291 |       if (type == "variable") mark("cm-property");
292 |       if (atomicTypes.hasOwnProperty(type)) cont(expect(":"), expression);
293 |     }
294 |     // Parses a comma-separated list of the things that are recognized
295 |     // by the 'what' argument.
296 |     function commasep(what, end){
297 |       function proceed(type) {
298 |         if (type == ",") cont(what, proceed);
299 |         else if (type == end) cont();
300 |         else cont(expect(end));
301 |       }
302 |       return function commaSeparated(type) {
303 |         if (type == end) cont();
304 |         else pass(what, proceed);
305 |       };
306 |     }
307 |     // Look for statements until a closing brace is found.
308 |     function block(type){
309 |       if (type == "}") cont();
310 |       else pass(statement, block);
311 |     }
312 |     // Variable definitions are split into two actions -- 1 looks for
313 |     // a name or the end of the definition, 2 looks for an '=' sign or
314 |     // a comma.
315 |     function vardef1(type, value){
316 |       if (type == "variable"){register(value); cont(vardef2);}
317 |       else cont();
318 |     }
319 |     function vardef2(type, value){
320 |       if (value == "=") cont(expression, vardef2);
321 |       else if (type == ",") cont(vardef1);
322 |     }
323 |     // For loops.
324 |     function forspec1(type){
325 |       if (type == "var") cont(vardef1, forspec2);
326 |       else if (type == ";") pass(forspec2);
327 |       else if (type == "variable") cont(formaybein);
328 |       else pass(forspec2);
329 |     }
330 |     function formaybein(type, value){
331 |       if (value == "in") cont(expression);
332 |       else cont(maybeoperator, forspec2);
333 |     }
334 |     function forspec2(type, value){
335 |       if (type == ";") cont(forspec3);
336 |       else if (value == "in") cont(expression);
337 |       else cont(expression, expect(";"), forspec3);
338 |     }
339 |     function forspec3(type) {
340 |       if (type == ")") pass();
341 |       else cont(expression);
342 |     }
343 |     // A function definition creates a new context, and the variables
344 |     // in its argument list have to be added to this context.
345 |     function functiondef(type, value){
346 |       if (type == "variable"){register(value); cont(functiondef);}
347 |       else if (type == "(") cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
348 |     }
349 |     function funarg(type, value){
350 |       if (type == "variable"){register(value); cont();}
351 |     }
352 | 
353 |     return parser;
354 |   }
355 | 
356 |   return {
357 |     make: parseJS,
358 |     electricChars: "{}:",
359 |     configure: function(obj) {
360 |       if (obj.json != null) json = obj.json;
361 |     }
362 |   };
363 | })();
364 | 
365 | module.exports = JSParser;
366 | 


--------------------------------------------------------------------------------
/code-mirror-highlighting/stringstream.js:
--------------------------------------------------------------------------------
  1 | /* String streams are the things fed to parsers (which can feed them
  2 |  * to a tokenizer if they want). They provide peek and next methods
  3 |  * for looking at the current character (next 'consumes' this
  4 |  * character, peek does not), and a get method for retrieving all the
  5 |  * text that was consumed since the last time get was called.
  6 |  *
  7 |  * An easy mistake to make is to let a StopIteration exception finish
  8 |  * the token stream while there are still characters pending in the
  9 |  * string stream (hitting the end of the buffer while parsing a
 10 |  * token). To make it easier to detect such errors, the stringstreams
 11 |  * throw an exception when this happens.
 12 |  */
 13 | 
 14 | window.StopIteration = {toString: function() {return "StopIteration"}};
 15 | 
 16 | // Make a stringstream stream out of an iterator that returns strings.
 17 | // This is applied to the result of traverseDOM (see codemirror.js),
 18 | // and the resulting stream is fed to the parser.
 19 | var stringStream = function(source){
 20 |   // String that's currently being iterated over.
 21 |   var current = "";
 22 |   // Position in that string.
 23 |   var pos = 0;
 24 |   // Accumulator for strings that have been iterated over but not
 25 |   // get()-ed yet.
 26 |   var accum = "";
 27 |   // Make sure there are more characters ready, or throw
 28 |   // StopIteration.
 29 |   function ensureChars() {
 30 |     while (pos == current.length) {
 31 |       accum += current;
 32 |       current = ""; // In case source.next() throws
 33 |       pos = 0;
 34 |       try {current = source.next();}
 35 |       catch (e) {
 36 |         if (e != StopIteration) throw e;
 37 |         else return false;
 38 |       }
 39 |     }
 40 |     return true;
 41 |   }
 42 | 
 43 |   return {
 44 |     // peek: -> character
 45 |     // Return the next character in the stream.
 46 |     peek: function() {
 47 |       if (!ensureChars()) return null;
 48 |       return current.charAt(pos);
 49 |     },
 50 |     // next: -> character
 51 |     // Get the next character, throw StopIteration if at end, check
 52 |     // for unused content.
 53 |     next: function() {
 54 |       if (!ensureChars()) {
 55 |         if (accum.length > 0)
 56 |           throw "End of stringstream reached without emptying buffer ('" + accum + "').";
 57 |         else
 58 |           throw StopIteration;
 59 |       }
 60 |       return current.charAt(pos++);
 61 |     },
 62 |     // get(): -> string
 63 |     // Return the characters iterated over since the last call to
 64 |     // .get().
 65 |     get: function() {
 66 |       var temp = accum;
 67 |       accum = "";
 68 |       if (pos > 0){
 69 |         temp += current.slice(0, pos);
 70 |         current = current.slice(pos);
 71 |         pos = 0;
 72 |       }
 73 |       return temp;
 74 |     },
 75 |     // Push a string back into the stream.
 76 |     push: function(str) {
 77 |       current = current.slice(0, pos) + str + current.slice(pos);
 78 |     },
 79 |     lookAhead: function(str, consume, skipSpaces, caseInsensitive) {
 80 |       function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}
 81 |       str = cased(str);
 82 |       var found = false;
 83 | 
 84 |       var _accum = accum, _pos = pos;
 85 |       if (skipSpaces) this.nextWhileMatches(/[\s\u00a0]/);
 86 | 
 87 |       while (true) {
 88 |         var end = pos + str.length, left = current.length - pos;
 89 |         if (end <= current.length) {
 90 |           found = str == cased(current.slice(pos, end));
 91 |           pos = end;
 92 |           break;
 93 |         }
 94 |         else if (str.slice(0, left) == cased(current.slice(pos))) {
 95 |           accum += current; current = "";
 96 |           try {current = source.next();}
 97 |           catch (e) {if (e != StopIteration) throw e; break;}
 98 |           pos = 0;
 99 |           str = str.slice(left);
100 |         }
101 |         else {
102 |           break;
103 |         }
104 |       }
105 | 
106 |       if (!(found && consume)) {
107 |         current = accum.slice(_accum.length) + current;
108 |         pos = _pos;
109 |         accum = _accum;
110 |       }
111 | 
112 |       return found;
113 |     },
114 |     // Wont't match past end of line.
115 |     lookAheadRegex: function(regex, consume) {
116 |       if (regex.source.charAt(0) != "^")
117 |         throw new Error("Regexps passed to lookAheadRegex must start with ^");
118 | 
119 |       // Fetch the rest of the line
120 |       while (current.indexOf("\n", pos) == -1) {
121 |         try {current += source.next();}
122 |         catch (e) {if (e != StopIteration) throw e; break;}
123 |       }
124 |       var matched = current.slice(pos).match(regex);
125 |       if (matched && consume) pos += matched[0].length;
126 |       return matched;
127 |     },
128 | 
129 |     // Utils built on top of the above
130 |     // more: -> boolean
131 |     // Produce true if the stream isn't empty.
132 |     more: function() {
133 |       return this.peek() !== null;
134 |     },
135 |     applies: function(test) {
136 |       var next = this.peek();
137 |       return (next !== null && test(next));
138 |     },
139 |     nextWhile: function(test) {
140 |       var next;
141 |       while ((next = this.peek()) !== null && test(next))
142 |         this.next();
143 |     },
144 |     matches: function(re) {
145 |       var next = this.peek();
146 |       return (next !== null && re.test(next));
147 |     },
148 |     nextWhileMatches: function(re) {
149 |       var next;
150 |       while ((next = this.peek()) !== null && re.test(next))
151 |         this.next();
152 |     },
153 |     equals: function(ch) {
154 |       return ch === this.peek();
155 |     },
156 |     endOfLine: function() {
157 |       var next = this.peek();
158 |       return next == null || next == "\n";
159 |     }
160 |   };
161 | };
162 | 
163 | export default stringStream;
164 | 


--------------------------------------------------------------------------------
/code-mirror-highlighting/tokenizejs.js:
--------------------------------------------------------------------------------
  1 | /* Tokenizer for JavaScript code */
  2 | import tokenizer from './tokenizer';
  3 | 
  4 | var tokenizeJavaScript = (function() {
  5 |   // Advance the stream until the given character (not preceded by a
  6 |   // backslash) is encountered, or the end of the line is reached.
  7 |   function nextUntilUnescaped(source, end) {
  8 |     var escaped = false;
  9 |     while (!source.endOfLine()) {
 10 |       var next = source.next();
 11 |       if (next == end && !escaped)
 12 |         return false;
 13 |       escaped = !escaped && next == "\\";
 14 |     }
 15 |     return escaped;
 16 |   }
 17 | 
 18 |   // A map of JavaScript's keywords. The a/b/c keyword distinction is
 19 |   // very rough, but it gives the parser enough information to parse
 20 |   // correct code correctly (we don't care that much how we parse
 21 |   // incorrect code). The style information included in these objects
 22 |   // is used by the highlighter to pick the correct CSS style for a
 23 |   // token.
 24 |   var keywords = function(){
 25 |     function result(type, style){
 26 |       return {type: type, style: "cm-" + style};
 27 |     }
 28 |     // keywords that take a parenthised expression, and then a
 29 |     // statement (if)
 30 |     var keywordA = result("keyword a", "keyword");
 31 |     // keywords that take just a statement (else)
 32 |     var keywordB = result("keyword b", "keyword");
 33 |     // keywords that optionally take an expression, and form a
 34 |     // statement (return)
 35 |     var keywordC = result("keyword c", "keyword");
 36 |     var operator = result("operator", "keyword");
 37 |     var atom = result("atom", "atom");
 38 |     return {
 39 |       "if": keywordA, "while": keywordA, "with": keywordA,
 40 |       "else": keywordB, "do": keywordB, "try": keywordB, "finally": keywordB,
 41 |       "return": keywordC, "break": keywordC, "continue": keywordC, "new": keywordC, "delete": keywordC, "throw": keywordC,
 42 |       "in": operator, "typeof": operator, "instanceof": operator,
 43 |       "var": result("var", "keyword"), "function": result("function", "keyword"), "catch": result("catch", "keyword"),
 44 |       "for": result("for", "keyword"), "switch": result("switch", "keyword"),
 45 |       "case": result("case", "keyword"), "default": result("default", "keyword"),
 46 |       "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
 47 |     };
 48 |   }();
 49 | 
 50 |   // Some helper regexps
 51 |   var isOperatorChar = /[+\-*&%=<>!?|]/;
 52 |   var isHexDigit = /[0-9A-Fa-f]/;
 53 |   var isWordChar = /[\w\$_]/;
 54 | 
 55 |   // Wrapper around jsToken that helps maintain parser state (whether
 56 |   // we are inside of a multi-line comment and whether the next token
 57 |   // could be a regular expression).
 58 |   function jsTokenState(inside, regexp) {
 59 |     return function(source, setState) {
 60 |       var newInside = inside;
 61 |       var type = jsToken(inside, regexp, source, function(c) {newInside = c;});
 62 |       var newRegexp = type.type == "operator" || type.type == "keyword c" || type.type.match(/^[\[{}\(,;:]$/);
 63 |       if (newRegexp != regexp || newInside != inside)
 64 |         setState(jsTokenState(newInside, newRegexp));
 65 |       return type;
 66 |     };
 67 |   }
 68 | 
 69 |   // The token reader, intended to be used by the tokenizer from
 70 |   // tokenize.js (through jsTokenState). Advances the source stream
 71 |   // over a token, and returns an object containing the type and style
 72 |   // of that token.
 73 |   function jsToken(inside, regexp, source, setInside) {
 74 |     function readHexNumber(){
 75 |       source.next(); // skip the 'x'
 76 |       source.nextWhileMatches(isHexDigit);
 77 |       return {type: "number", style: "cm-atom"};
 78 |     }
 79 | 
 80 |     function readNumber() {
 81 |       source.nextWhileMatches(/[0-9]/);
 82 |       if (source.equals(".")){
 83 |         source.next();
 84 |         source.nextWhileMatches(/[0-9]/);
 85 |       }
 86 |       if (source.equals("e") || source.equals("E")){
 87 |         source.next();
 88 |         if (source.equals("-"))
 89 |           source.next();
 90 |         source.nextWhileMatches(/[0-9]/);
 91 |       }
 92 |       return {type: "number", style: "cm-atom"};
 93 |     }
 94 |     // Read a word, look it up in keywords. If not found, it is a
 95 |     // variable, otherwise it is a keyword of the type found.
 96 |     function readWord() {
 97 |       source.nextWhileMatches(isWordChar);
 98 |       var word = source.get();
 99 |       var known = keywords.hasOwnProperty(word) && keywords.propertyIsEnumerable(word) && keywords[word];
100 |       return known ? {type: known.type, style: known.style, content: word} :
101 |       {type: "variable", style: "cm-variable", content: word};
102 |     }
103 |     function readRegexp() {
104 |       nextUntilUnescaped(source, "/");
105 |       source.nextWhileMatches(/[gimy]/); // 'y' is "sticky" option in Mozilla
106 |       return {type: "regexp", style: "cm-string"};
107 |     }
108 |     // Mutli-line comments are tricky. We want to return the newlines
109 |     // embedded in them as regular newline tokens, and then continue
110 |     // returning a comment token for every line of the comment. So
111 |     // some state has to be saved (inside) to indicate whether we are
112 |     // inside a /* */ sequence.
113 |     function readMultilineComment(start){
114 |       var newInside = "/*";
115 |       var maybeEnd = (start == "*");
116 |       while (true) {
117 |         if (source.endOfLine())
118 |           break;
119 |         var next = source.next();
120 |         if (next == "/" && maybeEnd){
121 |           newInside = null;
122 |           break;
123 |         }
124 |         maybeEnd = (next == "*");
125 |       }
126 |       setInside(newInside);
127 |       return {type: "comment", style: "cm-comment"};
128 |     }
129 |     function readOperator() {
130 |       source.nextWhileMatches(isOperatorChar);
131 |       return {type: "operator", style: "cm-operator"};
132 |     }
133 |     function readString(quote) {
134 |       var endBackSlash = nextUntilUnescaped(source, quote);
135 |       setInside(endBackSlash ? quote : null);
136 |       return {type: "string", style: "cm-string"};
137 |     }
138 | 
139 |     // Fetch the next token. Dispatches on first character in the
140 |     // stream, or first two characters when the first is a slash.
141 |     if (inside == "\"" || inside == "'")
142 |       return readString(inside);
143 |     var ch = source.next();
144 |     if (inside == "/*")
145 |       return readMultilineComment(ch);
146 |     else if (ch == "\"" || ch == "'")
147 |       return readString(ch);
148 |     // with punctuation, the type of the token is the symbol itself
149 |     else if (/[\[\]{}\(\),;\:\.]/.test(ch))
150 |       return {type: ch, style: "cm-punctuation"};
151 |     else if (ch == "0" && (source.equals("x") || source.equals("X")))
152 |       return readHexNumber();
153 |     else if (/[0-9]/.test(ch))
154 |       return readNumber();
155 |     else if (ch == "/"){
156 |       if (source.equals("*"))
157 |       { source.next(); return readMultilineComment(ch); }
158 |       else if (source.equals("/"))
159 |       { nextUntilUnescaped(source, null); return {type: "comment", style: "cm-comment"};}
160 |       else if (regexp)
161 |         return readRegexp();
162 |       else
163 |         return readOperator();
164 |     }
165 |     else if (isOperatorChar.test(ch))
166 |       return readOperator();
167 |     else
168 |       return readWord();
169 |   }
170 | 
171 |   // The external interface to the tokenizer.
172 |   return function(source, startState) {
173 |     return tokenizer(source, startState || jsTokenState(false, true));
174 |   };
175 | })();
176 | 
177 | export default tokenizeJavaScript;
178 | 


--------------------------------------------------------------------------------
/code-mirror-highlighting/tokenizer.js:
--------------------------------------------------------------------------------
 1 | // A framework for simple tokenizers. Takes care of newlines and
 2 | // white-space, and of getting the text from the source stream into
 3 | // the token object. A state is a function of two arguments -- a
 4 | // string stream and a setState function. The second can be used to
 5 | // change the tokenizer's state, and can be ignored for stateless
 6 | // tokenizers. This function should advance the stream over a token
 7 | // and return a string or object containing information about the next
 8 | // token, or null to pass and have the (new) state be called to finish
 9 | // the token. When a string is given, it is wrapped in a {style, type}
10 | // object. In the resulting object, the characters consumed are stored
11 | // under the content property. Any whitespace following them is also
12 | // automatically consumed, and added to the value property. (Thus,
13 | // content is the actual meaningful part of the token, while value
14 | // contains all the text it spans.)
15 | 
16 | export default function tokenizer(source, state) {
17 |   // Newlines are always a separate token.
18 |   function isWhiteSpace(ch) {
19 |     // The messy regexp is because IE's regexp matcher is of the
20 |     // opinion that non-breaking spaces are no whitespace.
21 |     return ch != "\n" && /^[\s\u00a0]*$/.test(ch);
22 |   }
23 | 
24 |   var tokenizer = {
25 |     state: state,
26 | 
27 |     take: function(type) {
28 |       if (typeof(type) == "string")
29 |         type = {style: type, type: type};
30 | 
31 |       type.content = (type.content || "") + source.get();
32 |       if (!/\n$/.test(type.content))
33 |         source.nextWhile(isWhiteSpace);
34 |       type.value = type.content + source.get();
35 |       return type;
36 |     },
37 | 
38 |     next: function () {
39 |       if (!source.more()) throw StopIteration;
40 | 
41 |       var type;
42 |       if (source.equals("\n")) {
43 |         source.next();
44 |         return this.take("whitespace");
45 |       }
46 | 
47 |       if (source.applies(isWhiteSpace))
48 |         type = "whitespace";
49 |       else
50 |         while (!type)
51 |           type = this.state(source, function(s) {tokenizer.state = s;});
52 | 
53 |       return this.take(type);
54 |     }
55 |   };
56 |   return tokenizer;
57 | }
58 | 


--------------------------------------------------------------------------------
/edit.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ReactDOM = require("react-dom");
 3 | var ReactPlayground = require('./live-editor');
 4 | 
 5 | var HELLO_COMPONENT = "\
 6 | \/\/ {{{\n\
 7 | var HelloMessage = React.createClass({\n\
 8 |   render: function() {\n\
 9 |     return <div>Hello {this.props.name}</div>;\n\
10 |   }\n\
11 | });\n\
12 | \/\/ }}}\n\
13 | \n\
14 | export default <HelloMessage name=\"John\" />;\
15 | ";
16 | 
17 | ReactDOM.render(
18 |   <ReactPlayground codeText={HELLO_COMPONENT} />,
19 |   document.getElementById('inject')
20 | );
21 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset='utf-8'>
 5 |         <title>jsx compiler</title>
 6 |         <link rel="stylesheet" href="http://facebook.github.io/react/css/syntax.css">
 7 |         <link rel="stylesheet" href="http://facebook.github.io/react/css/codemirror.css">
 8 |         <link rel="stylesheet" href="http://facebook.github.io/react/css/react.css">
 9 |         <meta name="author" content="Joel Burget (joelburget@gmail.com)">
10 |         <meta name="copyright" content="Copyright &copy; Joel Burget">
11 |         <meta name="keywords" content="babel,javascript,react">
12 |     </head>
13 |     <body>
14 |       <div id="inject"></div>
15 |       <script type="text/javascript" src="dist/bundle.js"></script>
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import CodeMirrorEditor from './code-mirror-editor';
 2 | import CodeMirrorHighlight from './code-mirror-highlight';
 3 | import LiveCompile from './live-compile';
 4 | import LiveEditor from './live-editor';
 5 | 
 6 | export default {
 7 |   CodeMirrorEditor,
 8 |   CodeMirrorHighlight,
 9 |   LiveCompile,
10 |   LiveEditor,
11 | };
12 | 


--------------------------------------------------------------------------------
/live-compile.js:
--------------------------------------------------------------------------------
 1 | var React = require("react");
 2 | var ReactDOM = require("react-dom");
 3 | var babel = require('babel-core');
 4 | 
 5 | var selfCleaningTimeout = {
 6 |   componentDidUpdate: function() {
 7 |     clearTimeout(this.timeoutID);
 8 |   },
 9 | 
10 |   setTimeout: function() {
11 |     clearTimeout(this.timeoutID);
12 |     this.timeoutID = setTimeout.apply(null, arguments);
13 |   }
14 | };
15 | 
16 | var ComponentPreview = React.createClass({
17 |     propTypes: {
18 |       code: React.PropTypes.string.isRequired
19 |     },
20 | 
21 |     mixins: [selfCleaningTimeout],
22 | 
23 |     render: function() {
24 |         return <div ref="mount" />;
25 |     },
26 | 
27 |     componentDidMount: function() {
28 |       this.executeCode();
29 |     },
30 | 
31 |     componentDidUpdate: function(prevProps) {
32 |       // execute code only when the state's not being updated by switching tab
33 |       // this avoids re-displaying the error, which comes after a certain delay
34 |       if (this.props.code !== prevProps.code) {
35 |         this.executeCode();
36 |       }
37 |     },
38 | 
39 |     compileCode: function() {
40 |       return babel.transform(
41 |         this.props.code,
42 |         { presets:
43 |           [ require('babel-preset-es2015')
44 |           , require('babel-preset-react')
45 |           ]
46 |         }
47 |       ).code;
48 |     },
49 | 
50 |     executeCode: function() {
51 |       var mountNode = this.refs.mount;
52 | 
53 |       try {
54 |         ReactDOM.unmountComponentAtNode(mountNode);
55 |       } catch (e) { }
56 | 
57 |       try {
58 |         var compiledCode = this.compileCode();
59 |         ReactDOM.render(
60 |           eval(compiledCode),
61 |           mountNode
62 |         );
63 |       } catch (err) {
64 |         this.setTimeout(function() {
65 |           ReactDOM.render(
66 |             <div className="playgroundError">{err.toString()}</div>,
67 |             mountNode
68 |           );
69 |         }, 500);
70 |       }
71 |     }
72 | });
73 | 
74 | module.exports = ComponentPreview;
75 | 


--------------------------------------------------------------------------------
/live-editor.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joelburget/react-live-editor/ec03697a07d80f1867fba8139f1b5a3c6f6efd3d/live-editor.gif


--------------------------------------------------------------------------------
/live-editor.js:
--------------------------------------------------------------------------------
 1 | var React = require("react");
 2 | 
 3 | var CodeMirrorEditor = require("./code-mirror-editor");
 4 | var ComponentPreview = require("./live-compile");
 5 | 
 6 | var ReactPlayground = React.createClass({
 7 |   propTypes: {
 8 |     codeText: React.PropTypes.string.isRequired
 9 |   },
10 | 
11 |   getInitialState: function() {
12 |     return {
13 |       code: this.props.codeText
14 |     };
15 |   },
16 | 
17 |   handleCodeChange: function(code) {
18 |     this.setState({ code });
19 |   },
20 | 
21 |   render: function() {
22 |     const {code} = this.state;
23 | 
24 |     return <div className="playground">
25 |       <div className="playgroundCode">
26 |         <CodeMirrorEditor
27 |           onChange={this.handleCodeChange}
28 |           className="playgroundStage"
29 |           codeText={code}
30 |         />
31 |       </div>
32 |       <div className="playgroundPreview">
33 |         <ComponentPreview code={code} />
34 |       </div>
35 |     </div>;
36 |   },
37 | });
38 | 
39 | module.exports = ReactPlayground;
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-live-editor",
 3 |   "version": "5.2.1",
 4 |   "description": "Live editor for React components",
 5 |   "files": [
 6 |     "index.js",
 7 |     "code-mirror-editor.js",
 8 |     "live-compile.js",
 9 |     "live-editor.js",
10 |     "code-mirror-highlight.js",
11 |     "code-mirror-highlighting/jsparser.js",
12 |     "code-mirror-highlighting/stringstream.js",
13 |     "code-mirror-highlighting/tokenizejs.js",
14 |     "code-mirror-highlighting/tokenizer.js"
15 |   ],
16 |   "main": "index.js",
17 |   "scripts": {
18 |     "prepublish": "babel --presets es2015,react . -d . --ignore node_modules",
19 |     "test": "echo \"Error: no test specified\" && exit 1"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "https://github.com/joelburget/react-live-editor"
24 |   },
25 |   "keywords": [
26 |     "react-component",
27 |     "react",
28 |     "editor",
29 |     "component"
30 |   ],
31 |   "author": "Joel Burget",
32 |   "license": "MIT",
33 |   "dependencies": {
34 |     "babel-core": "^6.10.4",
35 |     "babel-preset-es2015": "^6.9.0",
36 |     "babel-preset-react": "^6.11.1",
37 |     "babel-template": "^6.9.0",
38 |     "codemirror": "^5.16.0"
39 |   },
40 |   "devDependencies": {
41 |     "babel-loader": "^6.2.4",
42 |     "json-loader": "^0.5.4",
43 |     "react": "^15.2.1",
44 |     "react-dom": "^15.2.1",
45 |     "webpack": "^1.13.1"
46 |   },
47 |   "peerDependencies": {
48 |     "react": "^15.2.1",
49 |     "react-dom": "^15.2.1"
50 |   },
51 |   "babel": {
52 |     "presets": [
53 |       "es2015",
54 |       "react"
55 |     ]
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   devtool: 'eval',
 6 |   entry: './edit',
 7 |   output: {
 8 |     path: path.join(__dirname, 'dist'),
 9 |     filename: 'bundle.js',
10 |     publicPath: '/dist/'
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         test: /\.js$/,
16 |         loaders: ['babel'],
17 |         exclude: path.join(__dirname, 'node_modules')
18 |       },
19 |       { test: /\.json$/, loader: 'json-loader' }
20 |     ]
21 |   },
22 |   node: {
23 |     fs: 'empty',
24 |     net: 'empty',
25 |     module: 'empty',
26 |   }
27 | };
28 | 


--------------------------------------------------------------------------------