chore(playground): Display cleaned prettier IR
Prettier has some utility functions to clean up the IR
before showing it in the debug panel. I changed our
Playground to also use these functions because it significantly
improves readability (less noise)
MODIFY
website/playground/src/DesktopPlayground.tsx
website/playground/src/DesktopPlayground.tsx
@@ -101,7 +101,7 @@ export default function DesktopPlayground(
<pre className="h-screen overflow-scroll">{formatter_ir}</pre>
</TabPanel>
<TabPanel>
- <ReactJson src={prettierOutput.ir} />
+ <pre className="h-screen overflow-scroll">{prettierOutput.ir}</pre>
</TabPanel>
<TabPanel>
<pre className="h-screen overflow-scroll whitespace-pre-wrap text-red-500 text-xs">

MODIFY
website/playground/src/MobilePlayground.tsx
website/playground/src/MobilePlayground.tsx
@@ -103,7 +103,7 @@ export function MobilePlayground(
<pre className="h-screen overflow-y-scroll">{formatter_ir}</pre>
</TabPanel>
<TabPanel>
- <ReactJson src={prettierOutput.ir} />
+ <pre className="h-screen overflow-y-scroll">{prettierOutput.ir}</pre>
</TabPanel>
<TabPanel>
<pre className="h-screen overflow-y-scroll whitespace-pre-wrap text-red-500 text-xs">

MODIFY
website/playground/src/types.ts
website/playground/src/types.ts
@@ -20,7 +20,7 @@ export interface PlaygroundState {
export interface PlaygroundProps {
setPlaygroundState: Dispatch<SetStateAction<PlaygroundState>>;
playgroundState: PlaygroundState;
- prettierOutput: { code: string; ir: object };
+ prettierOutput: { code: string; ir: string };
romeOutput: RomeOutput;
}

MODIFY
website/playground/src/utils.ts
website/playground/src/utils.ts
@@ -94,7 +94,7 @@ export function formatWithPrettier(
language: "js" | "ts";
quoteStyle: QuoteStyle;
},
-): { code: string; ir: object } {
+): { code: string; ir: string } {
try {
const prettierOptions = {
useTabs: options.indentStyle === IndentStyle.Tab,
@@ -104,15 +104,21 @@ export function formatWithPrettier(
plugins: [parserBabel],
singleQuote: options.quoteStyle === QuoteStyle.Single,
};
- const formattedCode = prettier.format(code, prettierOptions);
+
// @ts-ignore
- const ir = prettier.__debug.printToDoc(code, prettierOptions);
+ let debug = prettier.__debug;
+ const document = debug.printToDoc(code, prettierOptions);
+ const formattedCode = debug.printDocToString(document, prettierOptions).formatted;
+ const ir = debug.formatDoc(
+ document,
+ { parser: "babel", plugins: [parserBabel] },
+ );
return { code: formattedCode, ir };
- } catch (err) {
+ } catch (err: any) {
console.error(err);
//@ts-ignore
const code = err.toString();
- return { code, ir: { error: "Invalid code" } };
+ return { code, ir: `Error: Invalid code\n${err.message}` };
}
}

chore(playground): Display cleaned prettier IR (#2592)

Prettier has some utility functions to clean up the IR
before showing it in the debug panel. I changed our
Playground to also use these functions because it significantly
improves readability (less noise)