tune component updates and bump codemirror polling to hit 60 Hz (#493)

* tune componenet updates and bump codemirror polling to hit 60 Hz

* reuse omit

components/BackgroundSelect.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import { SketchPicker } from 'react-color'
+import shallowCompare from 'react-addons-shallow-compare'
 import WindowPointer from './WindowPointer'
 import ImagePicker from './ImagePicker'
 import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
@@ -20,6 +21,13 @@ class BackgroundSelect extends React.PureComponent {
     this.setState({ mounted: true })
   }
 
+  shouldComponentUpdate(prevProps, prevState) {
+    return (
+      prevState.isVisible !== this.state.isVisible ||
+      (prevState.isVisible && shallowCompare(this, prevProps, prevState))
+    )
+  }
+
   toggle() {
     this.setState({ isVisible: !this.state.isVisible })
   }

components/Carbon.js

@@ -73,7 +73,9 @@ class Carbon extends React.PureComponent {
         'Shift-Tab': 'indentLess'
       },
       // negative values removes the cursor, undefined means default (530)
-      cursorBlinkRate: this.props.readOnly ? -1 : undefined
+      cursorBlinkRate: this.props.readOnly ? -1 : undefined,
+      // needs to be able to refresh every 16ms to hit 60 frames / second
+      pollInterval: 16
     }
     const backgroundImage =
       (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||

components/Editor.js

@@ -7,6 +7,7 @@ import domtoimage from 'dom-to-image'
 import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 import Spinner from 'react-spinner'
 import shallowCompare from 'react-addons-shallow-compare'
+import omit from 'lodash.omit'
 
 // Ours
 import Button from './Button'
@@ -270,6 +271,9 @@ class Editor extends React.Component {
         </div>
       )
     }
+
+    const config = omit(this.state, ['code', 'aspectRatio'])
+
     return (
       <React.Fragment>
         <div className="editor">
@@ -297,7 +301,7 @@ class Editor extends React.Component {
               aspectRatio={this.state.aspectRatio}
             />
             <Settings
-              {...this.state}
+              {...config}
               onChange={this.updateSetting}
               resetDefaultSettings={this.resetDefaultSettings}
             />

components/Settings.js

@@ -12,7 +12,7 @@ import Collapse from './Collapse'
 import { COLORS } from '../lib/constants'
 import { toggle, formatCode } from '../lib/util'
 
-class Settings extends React.Component {
+class Settings extends React.PureComponent {
   constructor(props) {
     super(props)
     this.state = {

package.json

@@ -29,6 +29,7 @@
     "graphql": "^14.0.2",
     "highlight.js": "^9.12.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.omit": "^4.5.0",
     "match-sorter": "^2.3.0",
     "morphmorph": "^0.1.0",
     "ms": "^2.0.0",

pages/index.js

@@ -1,6 +1,7 @@
 // Theirs
 import React from 'react'
 import { withRouter } from 'next/router'
+import omit from 'lodash.omit'
 
 // Ours
 import Editor from '../components/Editor'
@@ -12,11 +13,7 @@ import { saveState } from '../lib/util'
 class Index extends React.Component {
   onEditorUpdate = state => {
     updateQueryString(this.props.router, state)
-    const s = { ...state }
-    delete s.code
-    delete s.backgroundImage
-    delete s.backgroundImageSelection
-    saveState(localStorage, s)
+    saveState(localStorage, omit(state, ['code', 'backgroundImage', 'backgroundImageSelection']))
   }
 
   render() {

yarn.lock

@@ -3912,6 +3912,10 @@ lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+
 lodash.once@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"