Add CLI flag for debugging comment attachment issues (#10124)

website/playground/EditorState.js

@@ -10,10 +10,12 @@ export default class extends React.Component {
       showSidebar: false,
       showAst: false,
       showDoc: false,
+      showComments: false,
       showSecondFormat: false,
       toggleSidebar: () => this.setState(stateToggler("showSidebar")),
       toggleAst: () => this.setState(stateToggler("showAst")),
       toggleDoc: () => this.setState(stateToggler("showDoc")),
+      toggleComments: () => this.setState(stateToggler("showComments")),
       toggleSecondFormat: () => this.setState(stateToggler("showSecondFormat")),
       ...storage.get("editor_state"),
     };

website/playground/Playground.js

@@ -151,9 +151,14 @@ class Playground extends React.Component {
   }
 
   render() {
-    const { worker } = this.props;
+    const { worker, version } = this.props;
     const { content, options } = this.state;
 
+    // TODO: remove this when v2.3.0 is released
+    const [major, minor] = version.split(".", 2).map(Number);
+    const showShowComments =
+      Number.isNaN(major) || (major === 2 && minor >= 3) || major > 2;
+
     return (
       <EditorState>
         {(editorState) => (
@@ -163,6 +168,7 @@ class Playground extends React.Component {
             options={options}
             debugAst={editorState.showAst}
             debugDoc={editorState.showDoc}
+            debugComments={showShowComments && editorState.showComments}
             reformat={editorState.showSecondFormat}
           >
             {({ formatted, debug }) => {
@@ -223,6 +229,13 @@ class Playground extends React.Component {
                           checked={editorState.showDoc}
                           onChange={editorState.toggleDoc}
                         />
+                        {showShowComments && (
+                          <Checkbox
+                            label="show comments"
+                            checked={editorState.showComments}
+                            onChange={editorState.toggleComments}
+                          />
+                        )}
                         <Checkbox
                           label="show second format"
                           checked={editorState.showSecondFormat}
@@ -255,6 +268,12 @@ class Playground extends React.Component {
                       {editorState.showDoc ? (
                         <DebugPanel value={debug.doc || ""} />
                       ) : null}
+                      {showShowComments && editorState.showComments ? (
+                        <DebugPanel
+                          value={debug.comments || ""}
+                          autoFold={util.getAstAutoFold(options.parser)}
+                        />
+                      ) : null}
                       <OutputPanel
                         mode={util.getCodemirrorMode(options.parser)}
                         value={formatted}

website/playground/PrettierFormat.js

@@ -11,7 +11,14 @@ export default class PrettierFormat extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    for (const key of ["code", "options", "debugAst", "debugDoc", "reformat"]) {
+    for (const key of [
+      "code",
+      "options",
+      "debugAst",
+      "debugDoc",
+      "debugComments",
+      "reformat",
+    ]) {
       if (prevProps[key] !== this.props[key]) {
         this.format();
         break;
@@ -26,11 +33,12 @@ export default class PrettierFormat extends React.Component {
       options,
       debugAst: ast,
       debugDoc: doc,
+      debugComments: comments,
       reformat,
     } = this.props;
 
     worker
-      .format(code, options, { ast, doc, reformat })
+      .format(code, options, { ast, doc, comments, reformat })
       .then((result) => this.setState(result));
   }
 

website/static/worker.js

@@ -71,11 +71,14 @@ function handleMessage(message) {
     const plugins = [{ parsers }];
     options.plugins = plugins;
 
+    const formatResult = formatCode(message.code, options);
+
     const response = {
-      formatted: formatCode(message.code, options),
+      formatted: formatResult.formatted,
       debug: {
         ast: null,
         doc: null,
+        comments: null,
         reformatted: null,
       },
     };
@@ -92,7 +95,7 @@ function handleMessage(message) {
 
       if (!errored) {
         try {
-          ast = formatCode(ast, { parser: "json", plugins });
+          ast = formatCode(ast, { parser: "json", plugins }).formatted;
         } catch (e) {
           ast = serializeAst(ast);
         }
@@ -111,8 +114,18 @@ function handleMessage(message) {
       }
     }
 
+    if (message.debug.comments) {
+      response.debug.comments = formatCode(
+        JSON.stringify(formatResult.comments || []),
+        { parser: "json", plugins }
+      ).formatted;
+    }
+
     if (message.debug.reformat) {
-      response.debug.reformatted = formatCode(response.formatted, options);
+      response.debug.reformatted = formatCode(
+        response.formatted,
+        options
+      ).formatted;
     }
 
     return response;
@@ -121,14 +134,14 @@ function handleMessage(message) {
 
 function formatCode(text, options) {
   try {
-    return prettier.format(text, options);
+    return prettier.formatWithCursor(text, options);
   } catch (e) {
     if (e.constructor && e.constructor.name === "SyntaxError") {
       // Likely something wrong with the user's code
-      return String(e);
+      return { formatted: String(e) };
     }
     // Likely a bug in Prettier
     // Provide the whole stack for debugging
-    return e.stack || String(e);
+    return { formatted: e.stack || String(e) };
   }
 }