placeholder + refactors

website/playground/Playground.js

@@ -7,6 +7,8 @@ import PrettierFormat from "./PrettierFormat";
 import { shallowEqual } from "./helpers";
 import * as urlHash from "./urlHash";
 import formatMarkdown from "./markdown";
+import * as util from "./util";
+import getCodeSample from "./codeSamples";
 
 import { Sidebar, SidebarCategory } from "./sidebar/components";
 import SidebarOptions from "./sidebar/SidebarOptions";
@@ -20,7 +22,7 @@ class Playground extends React.Component {
 
     const { content, options } = urlHash.read();
 
-    const defaultOptions = getDefaultOptions(props.availableOptions);
+    const defaultOptions = util.getDefaults(props.availableOptions);
 
     this.state = {
       content: content || "",
@@ -61,7 +63,7 @@ class Playground extends React.Component {
       version,
       window.location.href,
       options,
-      getCliOptions(availableOptions, options),
+      util.buildCliArgs(availableOptions, options),
       full
     );
   }
@@ -75,7 +77,7 @@ class Playground extends React.Component {
         {editorState => (
           <PrettierFormat
             worker={worker}
-            code={content}
+            code={content || getCodeSample(options.parser)}
             options={options}
             debugAst={editorState.showAst}
             debugDoc={editorState.showDoc}
@@ -116,9 +118,10 @@ class Playground extends React.Component {
                   </Sidebar>
                   <div className="editors">
                     <InputPanel
-                      mode={getCodemirrorMode(options.parser)}
+                      mode={util.getCodemirrorMode(options.parser)}
                       rulerColumn={options.printWidth}
                       value={content}
+                      placeholder={getCodeSample(options.parser)}
                       onChange={this.setContent}
                     />
                     {editorState.showAst ? (
@@ -128,13 +131,13 @@ class Playground extends React.Component {
                       <DebugPanel value={debugDoc || ""} />
                     ) : null}
                     <OutputPanel
-                      mode={getCodemirrorMode(options.parser)}
+                      mode={util.getCodemirrorMode(options.parser)}
                       value={formatted}
                       rulerColumn={options.printWidth}
                     />
                     {editorState.showSecondFormat ? (
                       <OutputPanel
-                        mode={getCodemirrorMode(options.parser)}
+                        mode={util.getCodemirrorMode(options.parser)}
                         value={getSecondFormat(formatted, reformatted)}
                         rulerColumn={options.printWidth}
                       />
@@ -183,23 +186,6 @@ function getReportLink(reportBody) {
   )}`;
 }
 
-function getCliOptions(availableOptions, options) {
-  const cliOptions = [];
-  for (let i = 0; i < availableOptions.length; i++) {
-    const option = availableOptions[i];
-    const value = options[option.name];
-
-    if (option.type === "boolean") {
-      if ((value && !option.inverted) || (!value && option.inverted)) {
-        cliOptions.push([option.cliName, true]);
-      }
-    } else if (value !== option.default) {
-      cliOptions.push([option.cliName, value]);
-    }
-  }
-  return cliOptions;
-}
-
 function getSecondFormat(formatted, reformatted) {
   return formatted === ""
     ? ""
@@ -208,26 +194,4 @@ function getSecondFormat(formatted, reformatted) {
       : reformatted;
 }
 
-function getDefaultOptions(availableOptions) {
-  return availableOptions.reduce((acc, option) => {
-    acc[option.name] = option.default;
-    return acc;
-  }, {});
-}
-
-function getCodemirrorMode(parser) {
-  switch (parser) {
-    case "css":
-    case "less":
-    case "scss":
-      return "css";
-    case "graphql":
-      return "graphql";
-    case "markdown":
-      return "markdown";
-    default:
-      return "jsx";
-  }
-}
-
 export default Playground;

website/playground/codeSamples.js

@@ -1,4 +1,4 @@
-export default function getCodeExample(parser) {
+export default function(parser) {
   switch (parser) {
     case "babylon":
       return [

website/playground/index.js

@@ -6,6 +6,7 @@ import ReactDOM from "react-dom";
 import Playground from "./Playground";
 import VersionLink from "./VersionLink";
 import WorkerApi from "./WorkerApi";
+import { getAvailableOptions, fixPrettierVersion } from "./util";
 
 const ENABLED_OPTIONS = [
   "parser",
@@ -36,7 +37,7 @@ class App extends React.Component {
       .then(({ supportInfo, version }) => {
         this.setState({
           loaded: true,
-          availableOptions: parsePrettierOptions(supportInfo),
+          availableOptions: getAvailableOptions(supportInfo, ENABLED_OPTIONS),
           version: fixPrettierVersion(version)
         });
       });
@@ -63,37 +64,3 @@ class App extends React.Component {
 }
 
 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/playground/panels.js

@@ -11,10 +11,19 @@ class CodeMirrorPanel extends React.Component {
   }
 
   componentDidMount() {
-    const { mode, rulerColumn: column, rulerColor: color, value } = this.props;
+    const {
+      mode,
+      rulerColumn: column,
+      rulerColor: color,
+      placeholder,
+      value
+    } = this.props;
     this._codeMirror = CodeMirror.fromTextArea(
       this._textareaRef.current,
-      Object.assign({ mode, rulers: [{ column, color }] }, this.props.options)
+      Object.assign(
+        { mode, rulers: [{ column, color }], placeholder },
+        this.props.options
+      )
     );
     this._codeMirror.on("change", this.handleChange);
 
@@ -32,6 +41,9 @@ class CodeMirrorPanel extends React.Component {
     if (this.props.mode !== prevProps.mode) {
       this._codeMirror.setOption("mode", this.props.mode);
     }
+    if (this.props.placeholder !== prevProps.placeholder) {
+      this._codeMirror.setOption("placeholder", this.props.placeholder);
+    }
     if (this.props.rulerColumn !== prevProps.rulerColumn) {
       const { rulerColumn: column, rulerColor: color } = this.props;
       this._codeMirror.setOption("rulers", [{ column, color }]);
@@ -59,7 +71,13 @@ class CodeMirrorPanel extends React.Component {
   }
 }
 
-export function InputPanel({ mode, rulerColumn, value, onChange }) {
+export function InputPanel({
+  mode,
+  rulerColumn,
+  value,
+  placeholder,
+  onChange
+}) {
   return (
     <CodeMirrorPanel
       options={{
@@ -74,6 +92,7 @@ export function InputPanel({ mode, rulerColumn, value, onChange }) {
       rulerColumn={rulerColumn}
       rulerColor="#eeeeee"
       value={value}
+      placeholder={placeholder}
       onChange={onChange}
     />
   );

website/playground/util.js

@@ -0,0 +1,72 @@
+export function getAvailableOptions(supportInfo, enabledOptions) {
+  const supportedOptions = supportInfo.options.reduce((acc, option) => {
+    acc[option.name] = option;
+    return acc;
+  }, {});
+
+  return enabledOptions.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 function fixPrettierVersion(version) {
+  const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/);
+  if (match) {
+    return `pr-${match[1]}`;
+  }
+  return version;
+}
+
+export function getDefaults(availableOptions) {
+  return availableOptions.reduce((acc, option) => {
+    acc[option.name] = option.default;
+    return acc;
+  }, {});
+}
+
+export function buildCliArgs(availableOptions, options) {
+  const args = [];
+  for (let i = 0; i < availableOptions.length; i++) {
+    const option = availableOptions[i];
+    const value = options[option.name];
+
+    if (option.type === "boolean") {
+      if ((value && !option.inverted) || (!value && option.inverted)) {
+        args.push([option.cliName, true]);
+      }
+    } else if (value !== option.default) {
+      args.push([option.cliName, value]);
+    }
+  }
+  return args;
+}
+
+export function getCodemirrorMode(parser) {
+  switch (parser) {
+    case "css":
+    case "less":
+    case "scss":
+      return "css";
+    case "graphql":
+      return "graphql";
+    case "markdown":
+      return "markdown";
+    default:
+      return "jsx";
+  }
+}