Add feature to test idempotency in playground

website/pages/playground/index.html

@@ -326,6 +326,9 @@
       <div class="editor loading output">
         <textarea id="output-editor"></textarea>
       </div>
+      <div class="editor loading output2">
+        <textarea id="output2-editor"></textarea>
+      </div>
     </div>
   </div>
 
@@ -357,6 +360,7 @@
           <span style="flex: 0.3"></span>
           <label><input type="checkbox" id="ast"> show AST (debug)</label>
           <label><input type="checkbox" id="doc"> show doc (debug)</label>
+          <label><input type="checkbox" id="output2"> show second format (debug)</label>
         </div>
       </div>
     </details>

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;
       })

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
   });
 };