last minute fixes

website/playground/Playground.js

@@ -54,6 +54,7 @@ class Playground extends React.Component {
     this.clearContent = this.setContent.bind(this, "");
     this.resetOptions = () => this.setState({ options: defaultOptions });
 
+    this.enabledOptions = orderOptions(props.availableOptions, ENABLED_OPTIONS);
     this.rangeStartOption = props.availableOptions.find(
       opt => opt.name === "rangeStart"
     );
@@ -101,7 +102,7 @@ class Playground extends React.Component {
   }
 
   render() {
-    const { availableOptions, worker } = this.props;
+    const { worker } = this.props;
     const { content, options } = this.state;
 
     return (
@@ -121,8 +122,7 @@ class Playground extends React.Component {
                   <Sidebar visible={editorState.showSidebar}>
                     <SidebarOptions
                       categories={CATEGORIES_ORDER}
-                      availableOptions={availableOptions}
-                      enabledOptions={ENABLED_OPTIONS}
+                      availableOptions={this.enabledOptions}
                       optionValues={options}
                       onOptionValueChange={this.handleOptionValueChange}
                     />
@@ -234,6 +234,15 @@ class Playground extends React.Component {
   }
 }
 
+function orderOptions(availableOptions, order) {
+  const optionsByName = {};
+  for (const option of availableOptions) {
+    optionsByName[option.name] = option;
+  }
+
+  return order.map(name => optionsByName[name]);
+}
+
 function getReportLink(reportBody) {
   return `https://github.com/prettier/prettier/issues/new?body=${encodeURIComponent(
     reportBody

website/playground/index.js

@@ -46,15 +46,15 @@ class App extends React.Component {
 }
 
 function augmentOption(option) {
+  if (option.type === "boolean" && option.default === true) {
+    option.inverted = true;
+  }
+
   option.cliName =
     "--" +
     (option.inverted ? "no-" : "") +
     option.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 
-  if (option.type === "boolean" && option.default === true) {
-    option.inverted = true;
-  }
-
   return option;
 }
 

website/playground/sidebar/SidebarOptions.js

@@ -7,7 +7,6 @@ import Option from "./options";
 export default function({
   categories,
   availableOptions,
-  enabledOptions,
   optionValues,
   onOptionValueChange
 }) {
@@ -16,17 +15,14 @@ export default function({
     category =>
       options[category] ? (
         <SidebarCategory key={category} title={category}>
-          {options[category].map(
-            option =>
-              enabledOptions.includes(option.name) ? (
-                <Option
-                  key={option.name}
-                  option={option}
-                  value={optionValues[option.name]}
-                  onChange={onOptionValueChange}
-                />
-              ) : null
-          )}
+          {options[category].map(option => (
+            <Option
+              key={option.name}
+              option={option}
+              value={optionValues[option.name]}
+              onChange={onOptionValueChange}
+            />
+          ))}
         </SidebarCategory>
       ) : null
   );

website/playground/util.js

@@ -6,13 +6,14 @@ export function fixPrettierVersion(version) {
   return version;
 }
 
-export function getDefaults(availableOptions, enabledOptions) {
-  return availableOptions.reduce((acc, option) => {
-    if (enabledOptions.includes(option.name)) {
-      acc[option.name] = option.default;
+export function getDefaults(availableOptions, optionNames) {
+  const defaults = {};
+  for (const option of availableOptions) {
+    if (optionNames.includes(option.name)) {
+      defaults[option.name] = option.default;
     }
-    return acc;
-  }, {});
+  }
+  return defaults;
 }
 
 export function buildCliArgs(availableOptions, options) {