Playground: show preprocessed AST (#13606)

src/cli/format.js

@@ -142,10 +142,10 @@ async function format(context, input, opt) {
     } else {
       const stringify = (obj) => JSON.stringify(obj, null, 2);
       const ast = stringify(
-        (await prettier.__debug.parse(input, opt, /* massage */ true)).ast
+        (await prettier.__debug.parse(input, opt, { massage: true })).ast
       );
       const past = stringify(
-        (await prettier.__debug.parse(pp, opt, /* massage */ true)).ast
+        (await prettier.__debug.parse(pp, opt, { massage: true })).ast
       );
 
       /* istanbul ignore next */

src/main/core.js

@@ -324,14 +324,22 @@ async function formatWithCursor(originalText, originalOptions) {
 const prettier = {
   formatWithCursor,
 
-  async parse(originalText, originalOptions, massage) {
+  async parse(originalText, originalOptions, devOptions) {
     const { text, options } = normalizeInputAndOptions(
       originalText,
       await normalizeOptions(originalOptions)
     );
     const parsed = await parse(text, options);
-    if (massage) {
-      parsed.ast = massageAST(parsed.ast, options);
+    if (devOptions) {
+      if (devOptions.massage) {
+        parsed.ast = massageAST(parsed.ast, options);
+      }
+      if (devOptions.preprocessForPrint) {
+        attachComments(parsed.text, parsed.ast, options);
+        if (options.printer.preprocess) {
+          parsed.ast = await options.printer.preprocess(parsed.ast, options);
+        }
+      }
     }
     return parsed;
   },

tests/config/format-test.js

@@ -435,11 +435,9 @@ function shouldSkipEolTest(code, options) {
 
 async function parse(source, options) {
   const prettier = await getPrettier();
-  const { ast } = await prettier.__debug.parse(
-    source,
-    options,
-    /* massage */ true
-  );
+  const { ast } = await prettier.__debug.parse(source, options, {
+    massage: true,
+  });
   return ast;
 }
 

tests/config/require-standalone.cjs

@@ -46,7 +46,7 @@ module.exports = {
   },
 
   __debug: {
-    parse(input, options, massage) {
+    parse(input, options, devOptions) {
       return vm.runInNewContext(
         `
           const options = {
@@ -56,9 +56,14 @@ module.exports = {
               ...($$$options.plugins || []),
             ],
           };
-          prettier.__debug.parse($$$input, options, ${JSON.stringify(massage)});
+          prettier.__debug.parse($$$input, options, $$$devOptions);
         `,
-        { $$$input: input, $$$options: options, ...sandbox }
+        {
+          $$$input: input,
+          $$$options: options,
+          $$$devOptions: devOptions,
+          ...sandbox,
+        }
       );
     },
   },

website/playground/EditorState.js

@@ -9,6 +9,7 @@ export default class EditorState extends React.Component {
     this.state = {
       showSidebar: window.innerWidth > window.innerHeight,
       showAst: false,
+      showPreprocessedAst: false,
       showDoc: false,
       showComments: false,
       showSecondFormat: false,
@@ -17,6 +18,8 @@ export default class EditorState extends React.Component {
       rethrowEmbedErrors: false,
       toggleSidebar: () => this.setState(stateToggler("showSidebar")),
       toggleAst: () => this.setState(stateToggler("showAst")),
+      togglePreprocessedAst: () =>
+        this.setState(stateToggler("showPreprocessedAst")),
       toggleDoc: () => this.setState(stateToggler("showDoc")),
       toggleComments: () => this.setState(stateToggler("showComments")),
       toggleSecondFormat: () => this.setState(stateToggler("showSecondFormat")),

website/playground/Playground.js

@@ -218,6 +218,7 @@ class Playground extends React.Component {
             code={content}
             options={options}
             debugAst={editorState.showAst}
+            debugPreprocessedAst={editorState.showPreprocessedAst}
             debugDoc={editorState.showDoc}
             debugComments={editorState.showComments}
             reformat={editorState.showSecondFormat}
@@ -281,6 +282,11 @@ class Playground extends React.Component {
                           checked={editorState.showAst}
                           onChange={editorState.toggleAst}
                         />
+                        <Checkbox
+                          label="show preprocessed AST"
+                          checked={editorState.showPreprocessedAst}
+                          onChange={editorState.togglePreprocessedAst}
+                        />
                         <Checkbox
                           label="show doc"
                           checked={editorState.showDoc}
@@ -346,6 +352,12 @@ class Playground extends React.Component {
                           autoFold={util.getAstAutoFold(options.parser)}
                         />
                       ) : null}
+                      {editorState.showPreprocessedAst ? (
+                        <DebugPanel
+                          value={debug.preprocessedAst || ""}
+                          autoFold={util.getAstAutoFold(options.parser)}
+                        />
+                      ) : null}
                       {editorState.showDoc ? (
                         <DebugPanel value={debug.doc || ""} />
                       ) : null}

website/playground/PrettierFormat.js

@@ -16,6 +16,7 @@ export default class PrettierFormat extends React.Component {
       "code",
       "options",
       "debugAst",
+      "debugPreprocessedAst",
       "debugDoc",
       "debugComments",
       "reformat",
@@ -35,6 +36,7 @@ export default class PrettierFormat extends React.Component {
       code,
       options,
       debugAst: ast,
+      debugPreprocessedAst: preprocessedAst,
       debugDoc: doc,
       debugComments: comments,
       reformat,
@@ -47,6 +49,7 @@ export default class PrettierFormat extends React.Component {
 
     const result = await worker.format(code, options, {
       ast,
+      preprocessedAst,
       doc,
       comments,
       reformat,

website/playground/util.js

@@ -53,8 +53,7 @@ export function getCodemirrorMode(parser) {
 }
 
 const astAutoFold = {
-  estree:
-    /^\s*"(loc|start|end|tokens|leadingComments|trailingComments|innerComments)":/,
+  estree: /^\s*"(loc|start|end|tokens|\w+Comments|comments)":/,
   postcss: /^\s*"(source|input|raws|file)":/,
   html: /^\s*"(\w+Span|valueTokens|tokens|file|tagDefinition)":/,
   mdast: /^\s*"position":/,

website/static/worker.js

@@ -116,13 +116,17 @@ async function handleFormatMessage(message) {
     },
   };
 
-  if (message.debug.ast) {
+  for (const key of ["ast", "preprocessedAst"]) {
+    if (!message.debug[key]) {
+      continue;
+    }
     let ast;
     let errored = false;
     try {
-      ast = serializeAst(
-        (await prettier.__debug.parse(message.code, options)).ast
-      );
+      const parsed = await prettier.__debug.parse(message.code, options, {
+        preprocessForPrint: key === "preprocessedAst",
+      });
+      ast = serializeAst(parsed.ast);
     } catch (e) {
       errored = true;
       ast = String(e);
@@ -135,7 +139,7 @@ async function handleFormatMessage(message) {
         ast = serializeAst(ast);
       }
     }
-    response.debug.ast = ast;
+    response.debug[key] = ast;
   }
 
   if (message.debug.doc) {