diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index 64bde0ccd..45c1e0cec 100644 --- a/website/pages/playground/index.html +++ b/website/pages/playground/index.html @@ -326,6 +326,9 @@
+
+ +
@@ -357,6 +360,7 @@ + diff --git a/website/static/playground.js b/website/static/playground.js index 8d4debf67..63a6c8dd5 100644 --- a/website/static/playground.js +++ b/website/static/playground.js @@ -7,6 +7,7 @@ var inputEditor; var docEditor; var astEditor; var outputEditor; +var output2Editor; var OPTIONS = [ "printWidth", @@ -19,9 +20,12 @@ var OPTIONS = [ "semi", "useTabs", "doc", - "ast" + "ast", + "output2" ]; +var IDEMPOTENT_MESSAGE = "✓ Second format is unchanged."; + var state = (function loadState(hash) { try { return JSON.parse(hash); @@ -50,6 +54,13 @@ worker.onmessage = function(message) { outputEditor.setValue(message.data.formatted); docEditor.setValue(message.data.doc || ""); astEditor.setValue(message.data.ast || ""); + output2Editor.setValue( + message.data.formatted === "" + ? "" + : message.data.formatted2 === message.data.formatted + ? IDEMPOTENT_MESSAGE + : message.data.formatted2 || "" + ); document.getElementById("button-report-issue").search = "body=" + encodeURIComponent(createIssueTemplate()); } @@ -94,6 +105,10 @@ window.onload = function() { document.getElementById("output-editor"), { readOnly: true, lineNumbers: true, theme: theme } ); + output2Editor = CodeMirror.fromTextArea( + document.getElementById("output2-editor"), + { readOnly: true, lineNumbers: true, theme: theme } + ); setCodemirrorMode(docEditor, "javascript"); setCodemirrorMode(astEditor, "javascript"); @@ -215,12 +230,18 @@ function formatAsync() { var mode = util.getCodemirrorMode(options); setCodemirrorMode(inputEditor, mode); setCodemirrorMode(outputEditor, mode); + setCodemirrorMode(output2Editor, mode); - outputEditor.setOption("rulers", [ - { column: options.printWidth, color: "#444444" } - ]); + [outputEditor, output2Editor].forEach(function(editor) { + editor.setOption("rulers", [ + { column: options.printWidth, color: "#444444" } + ]); + }); document.querySelector(".ast").style.display = options.ast ? "" : "none"; document.querySelector(".doc").style.display = options.doc ? "" : "none"; + document.querySelector(".output2").style.display = options.output2 + ? "" + : "none"; var value = encodeURIComponent( JSON.stringify( @@ -232,18 +253,21 @@ function formatAsync() { text: inputEditor.getValue(), options: options, ast: options.ast, - doc: options.doc + doc: options.doc, + formatted2: options.output2 }); } function createMarkdown() { var input = inputEditor.getValue(); var output = outputEditor.getValue(); + var output2 = output2Editor.getValue(); var options = getOptions(); var cliOptions = getCLIOptions(); var markdown = util.formatMarkdown( input, output, + output2, prettierVersion, window.location.href, options, @@ -267,9 +291,19 @@ function showTooltip(elem, text) { } var util = (function() { - function formatMarkdown(input, output, version, url, options, cliOptions) { + function formatMarkdown( + input, + output, + output2, + version, + url, + options, + cliOptions + ) { var syntax = getMarkdownSyntax(options); var optionsString = formatCLIOptions(cliOptions); + var isIdempotent = + output2 === "" || output2 === IDEMPOTENT_MESSAGE || output === output2; return [ "**Prettier " + version + "**", @@ -282,6 +316,11 @@ var util = (function() { "**Output:**", codeBlock(output, syntax) ] + .concat( + isIdempotent + ? [] + : ["", "**Second Output:**", codeBlock(output2, syntax)] + ) .filter(function(part) { return part != null; }) diff --git a/website/static/worker.js b/website/static/worker.js index 577e3faaf..ac67e8ba5 100644 --- a/website/static/worker.js +++ b/website/static/worker.js @@ -27,10 +27,12 @@ self.onmessage = function(message) { delete options.ast; delete options.doc; + delete options.output2; var formatted = formatCode(message.data.text, options); var doc; var ast; + var formatted2; if (message.data.ast) { var actualAst; @@ -63,10 +65,15 @@ self.onmessage = function(message) { } } + if (message.data.formatted2) { + formatted2 = formatCode(formatted, options); + } + self.postMessage({ formatted: formatted, doc: doc, ast: ast, + formatted2: formatted2, version: prettier.version }); };