WIP: integration with prettier (#469)

* add basic format with basic parser

* remove format loading

* change formatCode to be sync

* prettier adjustments

* prettier our code

* move prettify into settings menu

components/Editor.js

@@ -73,13 +73,13 @@ class Editor extends React.Component {
       online: Boolean(window && window.navigator && window.navigator.onLine)
     })
 
-    window.addEventListener('offline', this.setOffline);
-    window.addEventListener('online', this.setOnline);
+    window.addEventListener('offline', this.setOffline)
+    window.addEventListener('online', this.setOnline)
   }
 
   componentWillUnmount() {
-    window.removeEventListener('offline', this.setOffline);
-    window.removeEventListener('online', this.setOnline);
+    window.removeEventListener('offline', this.setOffline)
+    window.removeEventListener('online', this.setOnline)
   }
 
   componentDidUpdate() {
@@ -101,7 +101,7 @@ class Editor extends React.Component {
     if (isPNG) {
       document.querySelectorAll('.CodeMirror-line > span > span').forEach(n => {
         if (n.innerText && n.innerText.match(/%\S\S/)) {
-          n.innerText = encodeURIComponent(n.innerText);
+          n.innerText = encodeURIComponent(n.innerText)
         }
       })
     }
@@ -245,15 +245,16 @@ class Editor extends React.Component {
               resetDefaultSettings={this.resetDefaultSettings}
             />
             <div className="buttons">
-              {this.props.tweet && this.state.online && (
-                <Button
-                  className="tweetButton"
-                  onClick={this.upload}
-                  title={this.state.uploading ? 'Loading...' : 'Tweet Image'}
-                  color="#57b5f9"
-                  style={{ marginRight: '8px' }}
-                />
-              )}
+              {this.props.tweet &&
+                this.state.online && (
+                  <Button
+                    className="tweetButton"
+                    onClick={this.upload}
+                    title={this.state.uploading ? 'Loading...' : 'Tweet Image'}
+                    color="#57b5f9"
+                    style={{ marginRight: '8px' }}
+                  />
+                )}
               <Dropdown {...saveButtonOptions} onChange={this.save} />
             </div>
           </Toolbar>
@@ -298,16 +299,16 @@ class Editor extends React.Component {
 }
 
 function formatTimestamp() {
-  const timezoneOffset = (new Date()).getTimezoneOffset() * 60000
-  const timeString = (new Date(Date.now() - timezoneOffset)).toISOString()
+  const timezoneOffset = new Date().getTimezoneOffset() * 60000
+  const timeString = new Date(Date.now() - timezoneOffset)
+    .toISOString()
     .slice(0, 19)
-    .replace(/:/g,'-')
-    .replace('T','_')
+    .replace(/:/g, '-')
+    .replace('T', '_')
 
-  return timeString;
+  return timeString
 }
 
-
 function isImage(file) {
   return file.type.split('/')[0] === 'image'
 }

components/Header.js

@@ -9,8 +9,8 @@ const Header = ({ enableHeroText }) => (
       </a>
       {enableHeroText ? (
         <h2 className="mt3">
-          Create and share beautiful images of your source code.<br /> Start typing or drop a file
-          into the text area to get started.
+          Create and share beautiful images of your source code.
+          <br /> Start typing or drop a file into the text area to get started.
         </h2>
       ) : null}
     </div>

components/Meta.js

@@ -36,7 +36,7 @@ export default () => {
         <meta name="og:image" content="/static/banner.png" />
         <meta name="theme-color" content="#121212" />
         <title>Carbon</title>
-        <link rel='manifest' href='/static/manifest.json' />
+        <link rel="manifest" href="/static/manifest.json" />
         <link rel="shortcut icon" href="/static/favicon.ico" />
         <link rel="stylesheet" href="/_next/static/style.css" />
         <link

components/Settings.js

@@ -8,7 +8,9 @@ import Slider from './Slider'
 import Toggle from './Toggle'
 import WindowPointer from './WindowPointer'
 import Collapse from './Collapse'
+
 import { COLORS } from '../lib/constants'
+import { formatCode } from '../lib/util'
 
 class Settings extends React.Component {
   constructor(props) {
@@ -17,6 +19,7 @@ class Settings extends React.Component {
       isVisible: false
     }
     this.toggle = this.toggle.bind(this)
+    this.format = this.format.bind(this)
   }
 
   toggle() {
@@ -27,6 +30,15 @@ class Settings extends React.Component {
     this.setState({ isVisible: false })
   }
 
+  format() {
+    try {
+      const newCode = formatCode(this.props.code)
+      this.props.onChange('code', newCode)
+    } catch (e) {
+      // pass, create a toast here in the future.
+    }
+  }
+
   render() {
     return (
       <div className="settings-container">
@@ -123,8 +135,10 @@ class Settings extends React.Component {
               selected={this.props.exportSize || '2x'}
               onChange={this.props.onChange.bind(null, 'exportSize')}
             />
+            <Toggle label="Prettify code" center={true} enabled={false} onChange={this.format} />
             <Toggle
-              label="Reset settings"
+              label={<center className="red">Reset settings</center>}
+              center={true}
               enabled={false}
               onChange={this.props.resetDefaultSettings}
             />
@@ -186,6 +200,10 @@ class Settings extends React.Component {
             .settings-settings > :global(.collapse) {
               border-bottom: none;
             }
+
+            .red {
+              color: red;
+            }
           `}
         </style>
       </div>

components/Slider.js

@@ -13,7 +13,7 @@ export default class extends React.Component {
   render() {
     const minValue = this.props.minValue || 0
     const maxValue = this.props.maxValue || 100
-    const step = 'step' in this.props ? this.props.step : 1;
+    const step = 'step' in this.props ? this.props.step : 1
 
     return (
       <div className="slider">

handlers/image.js

@@ -26,7 +26,8 @@ module.exports = browser => async (req, res) => {
         filter: n => {
           // %[00 -> 19] cause failures
           if (
-            n.innerText && n.innerText.match(/%\S\S/) &&
+            n.innerText &&
+            n.innerText.match(/%\S\S/) &&
             n.className &&
             n.className.startsWith('cm-') // is CodeMirror primitive string
           ) {

lib/routing.js

@@ -52,9 +52,8 @@ const reverseMappings = mappings.map(mapping =>
 export const serializeState = state => {
   const stateString = encodeURIComponent(JSON.stringify(state))
 
-  return encodeURIComponent(typeof window !== 'undefined'
-    ? btoa(stateString)
-    : Buffer.from(stateString).toString('base64')
+  return encodeURIComponent(
+    typeof window !== 'undefined' ? btoa(stateString) : Buffer.from(stateString).toString('base64')
   )
 }
 

lib/util.js

@@ -1,4 +1,6 @@
 import morph from 'morphmorph'
+import prettier from 'prettier/standalone'
+import babylonParser from 'prettier/parser-babylon'
 
 const KEY = 'CARBON_STATE'
 
@@ -40,3 +42,11 @@ export const fileToDataURL = blob =>
     reader.onload = e => res(e.target.result)
     reader.readAsDataURL(blob)
   })
+
+export const formatCode = code =>
+  prettier.format(code, {
+    parser: 'babylon',
+    plugins: [babylonParser],
+    semi: false,
+    singleQuote: true
+  })