moved expression building into a selector

Author: StephenGrider

src/actions/index.js

@@ -3,6 +3,8 @@ import {
 } from 'actions/types';
 
 export function updateCode(code) {
+  localStorage.setItem('code', code);
+  
   return {
     type: DID_UPDATE_CODE,
     payload: code

src/components/viewer.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
-import { connect } from 'react-redux';
 import React, { Component } from 'react';
-import { transform } from 'babel-standalone';
-import esprima from 'esprima';
+import { connect } from 'react-redux';
+import parseExpressions from 'selectors/parse_expressions';
 
 window.React = React;
 window.Component = Component;
@@ -17,59 +16,6 @@ const DELIMITER_MAP = {
 };
 
 class Viewer extends Component {
-  constructor(props) {
-    super(props);
-
-    // this.renderExpressions = _.memoize(code => this._renderExpressions(code, []));
-  }
-
-  lineHasMoreDelimiters({ column }, lineContents) {
-    return _.intersection(_.takeRight(lineContents, lineContents.length - column), OPEN_DELIMITERS).length;
-  }
-
-  buildExpressions(code) {
-    const transformedCode = transform(code, { presets: ['react']}).code;
-    const codeByLine = transformedCode.split('\n');
-    const tokenized = esprima.tokenize(transformedCode, { loc: true });
-
-    const parens = { '(': 0, '{': 0, '[': 0 };
-    let wasOpen = false;
-    const exp = _.reduce(tokenized, (expressions, { value, loc: { end } }, index) => {
-      const lineNumber = end.line;
-      const lineContents = codeByLine[lineNumber - 1];
-      const lineHasMoreDelimiters = this.lineHasMoreDelimiters(end, lineContents);
-      const endOfLine = end.column === lineContents.length;
-
-      if (expressions[lineNumber]) { return expressions; }
-
-      if (OPEN_DELIMITERS.includes(value)) {
-        parens[value] += 1;
-        wasOpen = true;
-      }
-
-      if (CLOSE_DELIMITERS.includes(value)) {
-        parens[DELIMITER_MAP[value]] -= 1;
-      }
-
-      if (!lineHasMoreDelimiters && wasOpen && _.every(parens, count => count === 0)) {
-        wasOpen = false;
-        expressions[lineNumber] = _.take(codeByLine, lineNumber).join('\n');
-
-        return expressions;
-      }
-
-      if (!lineHasMoreDelimiters && _.every(parens, count => count === 0)) {
-        expressions[lineNumber] = _.take(codeByLine, lineNumber).join('\n');
-
-        return expressions;
-      }
-
-      return expressions;
-    }, {});
-
-    return exp;
-  }
-
   evaluateExpressions(expressions) {
     const formattedExpressions = _.mapValues(expressions, expression => {
       const result = eval(expression);
@@ -93,7 +39,7 @@ class Viewer extends Component {
   }
 
   renderExpressions(code) {
-    return this.evaluateExpressions(this.buildExpressions(code));
+    return this.evaluateExpressions(this.props.expressions);
   }
 
   render() {
@@ -105,8 +51,8 @@ class Viewer extends Component {
   }
 }
 
-function mapStateToProps({ code }){
-  return { code };
+function mapStateToProps(state){
+  return { expressions: parseExpressions(state) };
 }
 
 export default connect(mapStateToProps)(Viewer);

src/reducers/code_reducer.js

@@ -1,6 +1,8 @@
 import { DID_UPDATE_CODE } from 'actions/types';
 
-export default function(state = '', action) {
+const INITIAL_STATE = localStorage.getItem('code') || '';
+
+export default function(state = INITIAL_STATE, action) {
   switch (action.type) {
   case DID_UPDATE_CODE:
     return action.payload

src/selectors/parse_expressions.js

@@ -0,0 +1,65 @@
+import _ from 'lodash';
+import { createSelector } from 'reselect';
+import { transform } from 'babel-standalone';
+import esprima from 'esprima';
+
+const codeSelector = state => state.code;
+const OPEN_DELIMITERS = [ '(', '{', '[', '`' ];
+const CLOSE_DELIMITERS = [ ')', '}', ']', '`' ];
+const DELIMITER_MAP = {
+  ')': '(',
+  '}': '{',
+  ']': '[',
+  '`': '`'
+};
+
+const findDelimiters = ({ column }, lineContents) =>
+  _.intersection(_.takeRight(lineContents, lineContents.length - column), OPEN_DELIMITERS).length
+
+const parseExpressions = (code) => {
+  const transformedCode = transform(code, { presets: ['react']}).code;
+  const codeByLine = transformedCode.split('\n');
+  const tokenized = esprima.tokenize(transformedCode, { loc: true });
+
+  const parens = { '(': 0, '{': 0, '[': 0 };
+  let wasOpen = false;
+  const exp = _.reduce(tokenized, (expressions, { value, loc: { end } }, index) => {
+    const lineNumber = end.line;
+    const lineContents = codeByLine[lineNumber - 1];
+    const lineHasMoreDelimiters = findDelimiters(end, lineContents);
+    const endOfLine = end.column === lineContents.length;
+
+    if (expressions[lineNumber]) { return expressions; }
+
+    if (OPEN_DELIMITERS.includes(value)) {
+      parens[value] += 1;
+      wasOpen = true;
+    }
+
+    if (CLOSE_DELIMITERS.includes(value)) {
+      parens[DELIMITER_MAP[value]] -= 1;
+    }
+
+    if (!lineHasMoreDelimiters && wasOpen && _.every(parens, count => count === 0)) {
+      wasOpen = false;
+      expressions[lineNumber] = _.take(codeByLine, lineNumber).join('\n');
+
+      return expressions;
+    }
+
+    if (!lineHasMoreDelimiters && _.every(parens, count => count === 0)) {
+      expressions[lineNumber] = _.take(codeByLine, lineNumber).join('\n');
+
+      return expressions;
+    }
+
+    return expressions;
+  }, {});
+
+  return exp;
+}
+
+export default createSelector(
+  codeSelector,
+  parseExpressions
+);