included doc debug

website/playground/Playground.js

@@ -52,7 +52,11 @@ class Playground extends React.Component {
     this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
 
     this.setContent = content => this.setState({ content });
-    this.clearContent = () => this.setState({ content: "" });
+    this.clearContent = this.setContent.bind(this, "");
+    this.resetOptions = () =>
+      this.setState(state => ({
+        options: getDefaultOptions(state.availableOptions)
+      }));
   }
 
   componentDidMount() {
@@ -62,12 +66,10 @@ class Playground extends React.Component {
       .postMessage({ type: "meta" })
       .then(({ supportInfo, version }) => {
         const availableOptions = parsePrettierOptions(supportInfo);
-        const options =
+        const options = Object.assign(
-          this.state.options ||
+          getDefaultOptions(availableOptions),
-          availableOptions.reduce((acc, option) => {
+          this.state.options
-            acc[option.name] = option.default;
+        );
-            return acc;
-          }, {});
 
         this.setState({ loaded: true, availableOptions, options, version });
       });
@@ -107,15 +109,24 @@ class Playground extends React.Component {
                     checked={editorState.showAst}
                     onChange={editorState.toggleAst}
                   />
+                  <Checkbox
+                    label="show doc"
+                    checked={editorState.showDoc}
+                    onChange={editorState.toggleDoc}
+                  />
                 </SidebarCategory>
+                <div className="sub-options">
+                  <Button onClick={this.resetOptions}>Reset to defaults</Button>
+                </div>
               </Sidebar>
               <PrettierFormat
                 worker={this._worker}
                 code={content}
                 options={options}
-                ast={editorState.showAst}
+                debugAst={editorState.showAst}
+                debugDoc={editorState.showDoc}
               >
-                {({ ast: codeAst, formatted }) => (
+                {({ formatted, debugAst, debugDoc }) => (
                   <div className="editors">
                     <InputPanel
                       mode={getCodemirrorMode(options.parser)}
@@ -124,10 +135,10 @@ class Playground extends React.Component {
                       onChange={this.setContent}
                     />
                     {editorState.showAst ? (
-                      <DebugPanel value={codeAst} />
+                      <DebugPanel value={debugAst} />
                     ) : null}
                     {editorState.showDoc ? (
-                      <DebugPanel value={"doc here"} />
+                      <DebugPanel value={debugDoc} />
                     ) : null}
                     <OutputPanel
                       mode={getCodemirrorMode(options.parser)}
@@ -158,6 +169,13 @@ class Playground extends React.Component {
   }
 }
 
+function getDefaultOptions(availableOptions) {
+  return availableOptions.reduce((acc, option) => {
+    acc[option.name] = option.default;
+    return acc;
+  }, {});
+}
+
 function getCodemirrorMode(parser) {
   switch (parser) {
     case "css":

website/playground/PrettierFormat.js

@@ -11,20 +11,21 @@ export default class extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { code, options, ast } = this.props;
+    const { code, options, debugAst, debugDoc } = this.props;
     if (
       prevProps.code !== code ||
       prevProps.options !== options ||
-      prevProps.ast !== ast
+      prevProps.debugAst !== debugAst ||
+      prevProps.debugDoc !== debugDoc
     ) {
       this.format();
     }
   }
 
   format() {
-    const { code, options, worker, ast } = this.props;
+    const { code, options, worker, debugAst, debugDoc } = this.props;
     worker
-      .postMessage({ type: "format", code, options, ast })
+      .postMessage({ type: "format", code, options, debugAst, debugDoc })
       .then(result => this.setState(result));
   }
 

website/static/worker.js

@@ -90,16 +90,17 @@ self.onmessage = function(event) {
 
       const response = {
         formatted: formatCode(message.code, options),
-        ast: null,
+        debugAst: null,
-        doc: null
+        debugDoc: null
       };
 
-      if (message.ast) {
+      if (message.debugAst) {
-        var actualAst;
+        var ast;
         var errored = false;
         try {
-          actualAst = prettier.__debug.parse(message.code, options).ast;
+          ast = JSON.stringify(
-          ast = JSON.stringify(actualAst);
+            prettier.__debug.parse(message.code, options).ast
+          );
         } catch (e) {
           errored = true;
           ast = String(e);
@@ -112,7 +113,18 @@ self.onmessage = function(event) {
             ast = JSON.stringify(actualAst, null, 2);
           }
         }
-        response.ast = ast;
+        response.debugAst = ast;
+      }
+
+      if (message.debugDoc) {
+        try {
+          response.debugDoc = prettier.__debug.formatDoc(
+            prettier.__debug.printToDoc(message.code, options),
+            { parser: "babylon" }
+          );
+        } catch (e) {
+          response.debugDoc = String(e);
+        }
       }
 
       self.postMessage({