simplify some stuff

website/playground/Playground.js

@@ -4,7 +4,6 @@ import { Button, ClipboardButton, LinkButton } from "./buttons";
 import EditorState from "./EditorState";
 import { DebugPanel, InputPanel, OutputPanel } from "./panels";
 import PrettierFormat from "./PrettierFormat";
-import VersionLink from "./VersionLink";
 import { shallowEqual } from "./helpers";
 import * as urlHash from "./urlHash";
 import formatMarkdown from "./markdown";
@@ -16,62 +15,24 @@ import { Checkbox } from "./sidebar/inputs";
 
 const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
 
-const ENABLED_OPTIONS = [
-  "parser",
-  "printWidth",
-  "tabWidth",
-  "useTabs",
-  { name: "semi", inverted: true },
-  "singleQuote",
-  { name: "bracketSpacing", inverted: true },
-  "jsxBracketSameLine",
-  "arrowParens",
-  "trailingComma",
-  "proseWrap",
-  "insertPragma",
-  "requirePragma"
-].map(option => (typeof option === "string" ? { name: option } : option));
-
 class Playground extends React.Component {
-  constructor() {
+  constructor(props) {
     super();
 
-    this.state = Object.assign(
-      {
-        content: "",
-        loaded: false,
-        options: null
-      },
-      urlHash.read()
-    );
+    const { content, options } = urlHash.read();
+
+    const defaultOptions = getDefaultOptions(props.availableOptions);
+
+    this.state = {
+      content: content || "",
+      options: Object.assign(defaultOptions, options)
+    };
+
     this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
 
     this.setContent = content => this.setState({ content });
     this.clearContent = this.setContent.bind(this, "");
-    this.resetOptions = () =>
-      this.setState(state => ({
-        options: getDefaultOptions(state.availableOptions)
-      }));
-    this.getCurrentUrl = () => window.location.href;
-  }
-
-  componentDidMount() {
-    this.props.worker
-      .postMessage({ type: "meta" })
-      .then(({ supportInfo, version }) => {
-        const availableOptions = parsePrettierOptions(supportInfo);
-        const options = Object.assign(
-          getDefaultOptions(availableOptions),
-          this.state.options
-        );
-
-        this.setState({
-          loaded: true,
-          availableOptions,
-          options,
-          version: fixPrettierVersion(version)
-        });
-      });
+    this.resetOptions = () => this.setState({ options: defaultOptions });
   }
 
   componentDidUpdate(_, prevState) {
@@ -91,7 +52,9 @@ class Playground extends React.Component {
   }
 
   getMarkdown(formatted, reformatted, full) {
-    const { availableOptions, content, options, version } = this.state;
+    const { content, options } = this.state;
+    const { availableOptions, version } = this.props;
+
     return formatMarkdown(
       content,
       formatted,
@@ -105,116 +68,112 @@ class Playground extends React.Component {
   }
 
   render() {
-    const { availableOptions, content, loaded, options } = this.state;
-
-    if (!loaded) return "Loading...";
+    const { availableOptions } = this.props;
+    const { content, options } = this.state;
 
     return (
-      <React.Fragment>
-        <VersionLink version={this.state.version} />
-        <EditorState>
-          {editorState => (
-            <PrettierFormat
-              worker={this.props.worker}
-              code={content}
-              options={options}
-              debugAst={editorState.showAst}
-              debugDoc={editorState.showDoc}
-              secondFormat={editorState.showSecondFormat}
-            >
-              {({ formatted, debugAst, debugDoc, reformatted }) => (
-                <React.Fragment>
-                  <div className="editors-container">
-                    <Sidebar visible={editorState.showSidebar}>
-                      <SidebarOptions
-                        categories={CATEGORIES_ORDER}
-                        availableOptions={availableOptions}
-                        optionValues={options}
-                        onOptionValueChange={this.handleOptionValueChange}
+      <EditorState>
+        {editorState => (
+          <PrettierFormat
+            worker={this.props.worker}
+            code={content}
+            options={options}
+            debugAst={editorState.showAst}
+            debugDoc={editorState.showDoc}
+            secondFormat={editorState.showSecondFormat}
+          >
+            {({ formatted, debugAst, debugDoc, reformatted }) => (
+              <React.Fragment>
+                <div className="editors-container">
+                  <Sidebar visible={editorState.showSidebar}>
+                    <SidebarOptions
+                      categories={CATEGORIES_ORDER}
+                      availableOptions={availableOptions}
+                      optionValues={options}
+                      onOptionValueChange={this.handleOptionValueChange}
+                    />
+                    <SidebarCategory title="Debug">
+                      <Checkbox
+                        label="show AST"
+                        checked={editorState.showAst}
+                        onChange={editorState.toggleAst}
                       />
-                      <SidebarCategory title="Debug">
-                        <Checkbox
-                          label="show AST"
-                          checked={editorState.showAst}
-                          onChange={editorState.toggleAst}
-                        />
-                        <Checkbox
-                          label="show doc"
-                          checked={editorState.showDoc}
-                          onChange={editorState.toggleDoc}
-                        />
-                        <Checkbox
-                          label="show second format"
-                          checked={editorState.showSecondFormat}
-                          onChange={editorState.toggleSecondFormat}
-                        />
-                      </SidebarCategory>
-                      <div className="sub-options">
-                        <Button onClick={this.resetOptions}>
-                          Reset to defaults
-                        </Button>
-                      </div>
-                    </Sidebar>
-                    <div className="editors">
-                      <InputPanel
-                        mode={getCodemirrorMode(options.parser)}
-                        rulerColumn={options.printWidth}
-                        value={content}
-                        onChange={this.setContent}
+                      <Checkbox
+                        label="show doc"
+                        checked={editorState.showDoc}
+                        onChange={editorState.toggleDoc}
                       />
-                      {editorState.showAst ? (
-                        <DebugPanel value={debugAst || ""} />
-                      ) : null}
-                      {editorState.showDoc ? (
-                        <DebugPanel value={debugDoc || ""} />
-                      ) : null}
+                      <Checkbox
+                        label="show second format"
+                        checked={editorState.showSecondFormat}
+                        onChange={editorState.toggleSecondFormat}
+                      />
+                    </SidebarCategory>
+                    <div className="sub-options">
+                      <Button onClick={this.resetOptions}>
+                        Reset to defaults
+                      </Button>
+                    </div>
+                  </Sidebar>
+                  <div className="editors">
+                    <InputPanel
+                      mode={getCodemirrorMode(options.parser)}
+                      rulerColumn={options.printWidth}
+                      value={content}
+                      onChange={this.setContent}
+                    />
+                    {editorState.showAst ? (
+                      <DebugPanel value={debugAst || ""} />
+                    ) : null}
+                    {editorState.showDoc ? (
+                      <DebugPanel value={debugDoc || ""} />
+                    ) : null}
+                    <OutputPanel
+                      mode={getCodemirrorMode(options.parser)}
+                      value={formatted}
+                      rulerColumn={options.printWidth}
+                    />
+                    {editorState.showSecondFormat ? (
                       <OutputPanel
                         mode={getCodemirrorMode(options.parser)}
-                        value={formatted}
+                        value={getSecondFormat(formatted, reformatted)}
                         rulerColumn={options.printWidth}
                       />
-                      {editorState.showSecondFormat ? (
-                        <OutputPanel
-                          mode={getCodemirrorMode(options.parser)}
-                          value={getSecondFormat(formatted, reformatted)}
-                          rulerColumn={options.printWidth}
-                        />
-                      ) : null}
-                    </div>
+                    ) : null}
                   </div>
-                  <div className="bottom-bar">
-                    <div className="bottom-bar-buttons">
-                      <Button onClick={editorState.toggleSidebar}>
-                        {editorState.showSidebar ? "Hide" : "Show"} options
-                      </Button>
-                      <Button onClick={this.clearContent}>Clear</Button>
-                    </div>
-                    <div className="bottom-bar-buttons bottom-bar-buttons-right">
-                      <ClipboardButton copy={this.getCurrentUrl}>
-                        Copy link
-                      </ClipboardButton>
-                      <ClipboardButton
-                        copy={() => this.getMarkdown(formatted, reformatted)}
-                      >
-                        Copy markdown
-                      </ClipboardButton>
-                      <LinkButton
-                        href={getReportLink(
-                          this.getMarkdown(formatted, reformatted, true)
-                        )}
-                        target="_blank"
-                        rel="noopener"
-                      >
-                        Report issue
-                      </LinkButton>
-                    </div>
+                </div>
+                <div className="bottom-bar">
+                  <div className="bottom-bar-buttons">
+                    <Button onClick={editorState.toggleSidebar}>
+                      {editorState.showSidebar ? "Hide" : "Show"} options
+                    </Button>
+                    <Button onClick={this.clearContent}>Clear</Button>
                   </div>
-                </React.Fragment>
-              )}
-            </PrettierFormat>
-          )}
-        </EditorState>
-      </React.Fragment>
+                  <div className="bottom-bar-buttons bottom-bar-buttons-right">
+                    <ClipboardButton copy={() => window.location.href}>
+                      Copy link
+                    </ClipboardButton>
+                    <ClipboardButton
+                      copy={() => this.getMarkdown(formatted, reformatted)}
+                    >
+                      Copy markdown
+                    </ClipboardButton>
+                    <LinkButton
+                      href={getReportLink(
+                        this.getMarkdown(formatted, reformatted, true)
+                      )}
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      Report issue
+                    </LinkButton>
+                  </div>
+                </div>
+              </React.Fragment>
+            )}
+          </PrettierFormat>
+        )}
+      </EditorState>
     );
   }
 }
@@ -250,14 +209,6 @@ function getSecondFormat(formatted, reformatted) {
       : reformatted;
 }
 
-function fixPrettierVersion(version) {
-  const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/);
-  if (match) {
-    return `pr-${match[1]}`;
-  }
-  return version;
-}
-
 function getDefaultOptions(availableOptions) {
   return availableOptions.reduce((acc, option) => {
     acc[option.name] = option.default;
@@ -280,28 +231,4 @@ function getCodemirrorMode(parser) {
   }
 }
 
-function parsePrettierOptions(supportInfo) {
-  const supportedOptions = supportInfo.options.reduce((acc, option) => {
-    acc[option.name] = option;
-    return acc;
-  }, {});
-
-  return ENABLED_OPTIONS.reduce((optionsList, optionConfig) => {
-    if (!supportedOptions[optionConfig.name]) return optionsList;
-
-    const option = Object.assign(
-      {},
-      optionConfig,
-      supportedOptions[optionConfig.name]
-    );
-    option.cliName =
-      "--" +
-      (option.inverted ? "no-" : "") +
-      option.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-
-    optionsList.push(option);
-    return optionsList;
-  }, []);
-}
-
 export default Playground;

website/playground/index.js

@@ -4,9 +4,92 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 import Playground from "./Playground";
+import VersionLink from "./VersionLink";
 import WorkerApi from "./WorkerApi";
 
-ReactDOM.render(
-  <Playground worker={new WorkerApi("/worker.js")} />,
-  document.getElementById("root")
-);
+const ENABLED_OPTIONS = [
+  "parser",
+  "printWidth",
+  "tabWidth",
+  "useTabs",
+  { name: "semi", inverted: true },
+  "singleQuote",
+  { name: "bracketSpacing", inverted: true },
+  "jsxBracketSameLine",
+  "arrowParens",
+  "trailingComma",
+  "proseWrap",
+  "insertPragma",
+  "requirePragma"
+].map(option => (typeof option === "string" ? { name: option } : option));
+
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = { loaded: false };
+    this.worker = new WorkerApi("/worker.js");
+  }
+
+  componentDidMount() {
+    this.worker
+      .postMessage({ type: "meta" })
+      .then(({ supportInfo, version }) => {
+        this.setState({
+          loaded: true,
+          availableOptions: parsePrettierOptions(supportInfo),
+          version: fixPrettierVersion(version)
+        });
+      });
+  }
+
+  render() {
+    const { loaded, availableOptions, version } = this.state;
+
+    if (!loaded) return "Loading...";
+
+    return (
+      <React.Fragment>
+        <VersionLink version={version} />
+        <Playground
+          worker={this.worker}
+          availableOptions={availableOptions}
+          version={version}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+function parsePrettierOptions(supportInfo) {
+  const supportedOptions = supportInfo.options.reduce((acc, option) => {
+    acc[option.name] = option;
+    return acc;
+  }, {});
+
+  return ENABLED_OPTIONS.reduce((optionsList, optionConfig) => {
+    if (!supportedOptions[optionConfig.name]) return optionsList;
+
+    const option = Object.assign(
+      {},
+      optionConfig,
+      supportedOptions[optionConfig.name]
+    );
+    option.cliName =
+      "--" +
+      (option.inverted ? "no-" : "") +
+      option.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+
+    optionsList.push(option);
+    return optionsList;
+  }, []);
+}
+
+function fixPrettierVersion(version) {
+  const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/);
+  if (match) {
+    return `pr-${match[1]}`;
+  }
+  return version;
+}

website/static/separate-css/playground.css

@@ -15,7 +15,6 @@ body {
   margin: 0;
 }
 
-#root,
 .playground-container {
   height: 100%;
   display: flex;