From effe30a3b89faa9fc67e520026bb82ffa4c4834c Mon Sep 17 00:00:00 2001 From: Georgii Dolzhykov Date: Mon, 10 Oct 2022 14:26:55 +0300 Subject: [PATCH] Playground: show preprocessed AST (#13606) --- src/cli/format.js | 4 ++-- src/main/core.js | 14 +++++++++++--- tests/config/format-test.js | 8 +++----- tests/config/require-standalone.cjs | 11 ++++++++--- website/playground/EditorState.js | 3 +++ website/playground/Playground.js | 12 ++++++++++++ website/playground/PrettierFormat.js | 3 +++ website/playground/util.js | 3 +-- website/static/worker.js | 14 +++++++++----- 9 files changed, 52 insertions(+), 20 deletions(-) diff --git a/src/cli/format.js b/src/cli/format.js index caa43e8e9..afc175b06 100644 --- a/src/cli/format.js +++ b/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 */ diff --git a/src/main/core.js b/src/main/core.js index f471b43d1..642b87959 100644 --- a/src/main/core.js +++ b/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; }, diff --git a/tests/config/format-test.js b/tests/config/format-test.js index 7fa3873e9..cfd11bae8 100644 --- a/tests/config/format-test.js +++ b/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; } diff --git a/tests/config/require-standalone.cjs b/tests/config/require-standalone.cjs index c2b88b751..ab0e66069 100644 --- a/tests/config/require-standalone.cjs +++ b/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, + } ); }, }, diff --git a/website/playground/EditorState.js b/website/playground/EditorState.js index 0ad15dc01..a932deb68 100644 --- a/website/playground/EditorState.js +++ b/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")), diff --git a/website/playground/Playground.js b/website/playground/Playground.js index 1830ac313..3d5daef88 100644 --- a/website/playground/Playground.js +++ b/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} /> + ) : null} + {editorState.showPreprocessedAst ? ( + + ) : null} {editorState.showDoc ? ( ) : null} diff --git a/website/playground/PrettierFormat.js b/website/playground/PrettierFormat.js index 5d9ec83a9..a10a06cf1 100644 --- a/website/playground/PrettierFormat.js +++ b/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, diff --git a/website/playground/util.js b/website/playground/util.js index 7e8031cd5..0ba259b6c 100644 --- a/website/playground/util.js +++ b/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":/, diff --git a/website/static/worker.js b/website/static/worker.js index 928340326..519e2f04b 100644 --- a/website/static/worker.js +++ b/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) {