refactor & fixes

website/playground/BottomBar.js

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const root = document.getElementById("bottom-bar");
+
+export default function({ left, right }) {
+  return ReactDOM.createPortal(
+    <React.Fragment>
+      <div className="bottom-bar-buttons">{left}</div>
+      <div className="bottom-bar-buttons bottom-bar-buttons-right">{right}</div>
+    </React.Fragment>,
+    root
+  );
+}

website/playground/Playground.js

@@ -14,8 +14,6 @@ import SidebarOptions from "./sidebar/SidebarOptions";
 import Option from "./sidebar/options";
 import { Checkbox } from "./sidebar/inputs";
 
-import WorkerApi from "./WorkerApi";
-
 const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
 
 const ENABLED_OPTIONS = [
@@ -58,9 +56,7 @@ class Playground extends React.Component {
   }
 
   componentDidMount() {
-    this._worker = new WorkerApi("/worker.js");
-
-    this._worker
+    this.props.worker
       .postMessage({ type: "meta" })
       .then(({ supportInfo, version }) => {
         const availableOptions = parsePrettierOptions(supportInfo);
@@ -119,7 +115,7 @@ class Playground extends React.Component {
         <EditorState>
           {editorState => (
             <PrettierFormat
-              worker={this._worker}
+              worker={this.props.worker}
               code={content}
               options={options}
               debugAst={editorState.showAst}
@@ -167,10 +163,10 @@ class Playground extends React.Component {
                         onChange={this.setContent}
                       />
                       {editorState.showAst ? (
-                        <DebugPanel value={debugAst} />
+                        <DebugPanel value={debugAst || ""} />
                       ) : null}
                       {editorState.showDoc ? (
-                        <DebugPanel value={debugDoc} />
+                        <DebugPanel value={debugDoc || ""} />
                       ) : null}
                       <OutputPanel
                         mode={getCodemirrorMode(options.parser)}

website/playground/PrettierFormat.js

@@ -1,5 +1,12 @@
 import React from "react";
 
+import { shallowEqual } from "./helpers";
+
+function getFormatProps(props) {
+  const { code, options, debugAst, debugDoc, secondFormat } = props;
+  return { code, options, debugAst, debugDoc, secondFormat };
+}
+
 export default class extends React.Component {
   constructor() {
     super();
@@ -11,36 +18,18 @@ export default class extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { code, options, debugAst, debugDoc, secondFormat } = this.props;
-    if (
-      prevProps.code !== code ||
-      prevProps.options !== options ||
-      prevProps.debugAst !== debugAst ||
-      prevProps.debugDoc !== debugDoc ||
-      prevProps.secondFormat !== secondFormat
-    ) {
+    if (!shallowEqual(getFormatProps(prevProps), getFormatProps(this.props))) {
       this.format();
     }
   }
 
   format() {
-    const {
-      code,
-      options,
-      worker,
-      debugAst,
-      debugDoc,
-      secondFormat
-    } = this.props;
+    const { worker } = this.props;
+
     worker
-      .postMessage({
-        type: "format",
-        code,
-        options,
-        debugAst,
-        debugDoc,
-        secondFormat
-      })
+      .postMessage(
+        Object.assign({ type: "format" }, getFormatProps(this.props))
+      )
       .then(result => this.setState(result));
   }
 

website/playground/helpers.js

@@ -33,7 +33,7 @@ export function shallowEqual(objA, objB) {
 
   if (keysA.length !== keysB.length) return false;
 
-  for (let i = 0; i <= keysA.length; i++) {
+  for (let i = 0; i < keysA.length; i++) {
     if (
       !hasOwnProperty.call(objB, keysA[i]) ||
       !is(objA[keysA[i]], objB[keysA[i]])

website/playground/index.js

@@ -4,5 +4,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 import Playground from "./Playground";
+import WorkerApi from "./WorkerApi";
 
-ReactDOM.render(<Playground />, document.getElementById("root"));
+ReactDOM.render(
+  <Playground worker={new WorkerApi("/worker.js")} />,
+  document.getElementById("root")
+);