Code split and load prettier dynamically (#471)

* code split and load prettier dynamically;

* move prettier to dependencies

components/Settings.js

@@ -31,12 +31,11 @@ class Settings extends React.Component {
   }
 
   format() {
-    try {
+    return formatCode(this.props.code)
-      const newCode = formatCode(this.props.code)
+      .then(this.props.onChange.bind(this, 'code'))
-      this.props.onChange('code', newCode)
+      .catch(() => {
-    } catch (e) {
+        // create toast here in the future
-      // pass, create a toast here in the future.
+      })
-    }
   }
 
   render() {

lib/util.js

@@ -1,6 +1,4 @@
 import morph from 'morphmorph'
-import prettier from 'prettier/standalone'
-import babylonParser from 'prettier/parser-babylon'
 
 const KEY = 'CARBON_STATE'
 
@@ -43,10 +41,14 @@ export const fileToDataURL = blob =>
     reader.readAsDataURL(blob)
   })
 
-export const formatCode = code =>
+export const formatCode = async code => {
-  prettier.format(code, {
+  const prettier = await import('prettier/standalone')
+  const babylonParser = await import('prettier/parser-babylon')
+
+  return prettier.format(code, {
     parser: 'babylon',
     plugins: [babylonParser],
     semi: false,
     singleQuote: true
   })
+}

package.json

@@ -39,6 +39,7 @@
     "next": "^6.0.3",
     "next-offline": "^2.9.0",
     "now-logs": "^0.0.7",
+    "prettier": "^1.8.1",
     "puppeteer": "1.7.0",
     "react": "16.3.*",
     "react-click-outside": "^3.0.0",
@@ -67,7 +68,6 @@
     "husky": "^0.14.3",
     "lint-staged": "^7.0.4",
     "now": "^11.1.7",
-    "prettier": "^1.8.1",
     "webpack": "^3.10.0"
   },
   "lint-staged": {