show ast

website/playground/Playground.js

@@ -2,7 +2,9 @@ import React from "react";
 
 import Button from "./Button";
 import EditorState from "./EditorState";
+import { Checkbox } from "./inputs";
 import { DebugPanel, InputPanel, OutputPanel } from "./panels";
+import PrettierFormat from "./PrettierFormat";
 import SidebarOptions from "./SidebarOptions";
 import WorkerApi from "./WorkerApi";
 
@@ -22,6 +24,23 @@ const ENABLED_OPTIONS = [
   "requirePragma"
 ].map(option => (typeof option === "string" ? { name: option } : option));
 
+function Sidebar({ visible, children }) {
+  return (
+    <div className={`options-container ${visible ? "open" : ""}`}>
+      <div className="options">{children}</div>
+    </div>
+  );
+}
+
+function SidebarCategory({ title, children }) {
+  return (
+    <details className="sub-options" open="true">
+      <summary>{title}</summary>
+      {children}
+    </details>
+  );
+}
+
 class Playground extends React.Component {
   constructor() {
     super();
@@ -60,31 +79,10 @@ class Playground extends React.Component {
     }));
   }
 
-  componentDidUpdate(_, prevState) {
-    if (
-      prevState.content !== this.state.content ||
-      prevState.options !== this.state.options
-    ) {
-      this._format();
-    }
-  }
-
-  _format() {
-    const { content, options } = this.state;
-    this._worker
-      .postMessage({
-        type: "format",
-        code: content,
-        options
-      })
-      .then(({ formatted }) => this.setState({ formatted }));
-  }
-
   render() {
     const {
       availableOptions,
       content,
-      formatted,
       loaded,
       options,
       showSidebar
@@ -97,34 +95,48 @@ class Playground extends React.Component {
         {editorState => (
           <div className="playground-container">
             <div className="editors-container">
-              <div
-                className={`options-container ${
-                  editorState.showSidebar ? "open" : ""
-                }`}
-              >
-                <div className="options">
-                  <SidebarOptions
-                    availableOptions={availableOptions}
-                    prettierOptions={options}
-                    onOptionValueChange={this.handleOptionValueChange}
+              <Sidebar visible={editorState.showSidebar}>
+                <SidebarOptions
+                  availableOptions={availableOptions}
+                  prettierOptions={options}
+                  onOptionValueChange={this.handleOptionValueChange}
+                />
+                <SidebarCategory title="Debug">
+                  <Checkbox
+                    label="show AST"
+                    checked={editorState.showAst}
+                    onChange={editorState.toggleAst}
                   />
-                </div>
-              </div>
-              <div className="editors">
-                <InputPanel
-                  mode={getCodemirrorMode(options.parser)}
-                  rulerColumn={options.printWidth}
-                  value={content}
-                  onChange={this.setContent}
-                />
-                {editorState.showAst ? <DebugPanel value={"ast here"} /> : null}
-                {editorState.showDoc ? <DebugPanel value={"doc here"} /> : null}
-                <OutputPanel
-                  mode={getCodemirrorMode(options.parser)}
-                  value={formatted}
-                  rulerColumn={options.printWidth}
-                />
-              </div>
+                </SidebarCategory>
+              </Sidebar>
+              <PrettierFormat
+                worker={this._worker}
+                code={content}
+                options={options}
+                ast={editorState.showAst}
+              >
+                {({ ast: codeAst, formatted }) => (
+                  <div className="editors">
+                    <InputPanel
+                      mode={getCodemirrorMode(options.parser)}
+                      rulerColumn={options.printWidth}
+                      value={content}
+                      onChange={this.setContent}
+                    />
+                    {editorState.showAst ? (
+                      <DebugPanel value={codeAst} />
+                    ) : null}
+                    {editorState.showDoc ? (
+                      <DebugPanel value={"doc here"} />
+                    ) : null}
+                    <OutputPanel
+                      mode={getCodemirrorMode(options.parser)}
+                      value={formatted}
+                      rulerColumn={options.printWidth}
+                    />
+                  </div>
+                )}
+              </PrettierFormat>
             </div>
             <div className="bottom-bar">
               <div className="bottom-bar-buttons">

website/playground/PrettierFormat.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+export default class extends React.Component {
+  constructor() {
+    super();
+    this.state = { formatted: "" };
+  }
+
+  componentDidMount() {
+    this.format();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { code, options, ast } = this.props;
+    if (
+      prevProps.code !== code ||
+      prevProps.options !== options ||
+      prevProps.ast !== ast
+    ) {
+      this.format();
+    }
+  }
+
+  format() {
+    const { code, options, worker, ast } = this.props;
+    worker
+      .postMessage({ type: "format", code, options, ast })
+      .then(result => this.setState(result));
+  }
+
+  render() {
+    return this.props.children(this.state);
+  }
+}

website/playground/SidebarOptions.js

@@ -16,22 +16,18 @@ export default function({
     return acc;
   }, {});
 
-  return (
-    <div className="options">
-      {CATEGORIES_ORDER.map(category => (
-        <details key={category} className="sub-options" open="true">
-          <summary>{category}</summary>
+  return CATEGORIES_ORDER.map(category => (
+    <details key={category} className="sub-options" open="true">
+      <summary>{category}</summary>
 
-          {(optionsByCategory[category] || []).map(option => (
-            <Option
-              key={option.name}
-              option={option}
-              value={prettierOptions[option.name]}
-              onChange={onOptionValueChange}
-            />
-          ))}
-        </details>
+      {(optionsByCategory[category] || []).map(option => (
+        <Option
+          key={option.name}
+          option={option}
+          value={prettierOptions[option.name]}
+          onChange={onOptionValueChange}
+        />
       ))}
-    </div>
-  );
+    </details>
+  ));
 }

website/static/old-worker.js

@@ -25,7 +25,7 @@ self.fs = { readFile: function() {} };
 os.homedir = function() {
   return "/home/prettier";
 };
-os.EOL = '\n';
+os.EOL = "\n";
 self.process = {
   argv: [],
   env: { PRETTIER_DEBUG: true },

website/static/worker.js

@@ -88,11 +88,36 @@ self.onmessage = function(event) {
       delete options.doc;
       delete options.output2;
 
+      const response = {
+        formatted: formatCode(message.code, options),
+        ast: null,
+        doc: null
+      };
+
+      if (message.ast) {
+        var actualAst;
+        var errored = false;
+        try {
+          actualAst = prettier.__debug.parse(message.code, options).ast;
+          ast = JSON.stringify(actualAst);
+        } catch (e) {
+          errored = true;
+          ast = String(e);
+        }
+
+        if (!errored) {
+          try {
+            ast = formatCode(ast, { parser: "json" });
+          } catch (e) {
+            ast = JSON.stringify(actualAst, null, 2);
+          }
+        }
+        response.ast = ast;
+      }
+
       self.postMessage({
         uid: uid,
-        message: {
-          formatted: formatCode(message.code, options)
-        }
+        message: response
       });
       break;
   }