Generate ISSUE_TEMPLATE.md on build

.github/ISSUE_TEMPLATE.md

@@ -2,22 +2,26 @@
 
 Tip! Don't write this stuff manually.
 
-1. Go to https://prettier.io/playground/
+1. Go to https://prettier.io/playground
 2. Paste your code and set options
-3. Press the "Copy as markdown" button in the upper right
+3. Press the "Report issue" button in the lower right
 
 -->
 
-**Prettier Version:** 1.6.1
-([Playground link](https://prettier.io/playground/#.....))
+**Prettier 1.6.1**
+[Playground link](https://prettier.io/playground/#.....)
+```
+# Options (if any):
+--single-quote
+```
 
 **Input:**
-```js
+```jsx
 // code snippet
 ```
 
 **Output:**
-```js
+```jsx
 // code snippet
 ```
 

scripts/build/build.js

@@ -4,6 +4,7 @@
 
 const path = require("path");
 const pkg = require("../../package.json");
+const formatMarkdown = require("../../website/static/markdown");
 const shell = require("shelljs");
 
 const rootDir = path.join(__dirname, "..", "..");
@@ -99,12 +100,22 @@ shell.sed(
 );
 
 shell.echo("Update ISSUE_TEMPLATE.md");
-shell.sed(
-  "-i",
-  /(?!Prettier Version.*?)\d+\.\d+\.\d+/,
-  pkg.version,
-  ".github/ISSUE_TEMPLATE.md"
+const issueTemplate = shell.cat(".github/ISSUE_TEMPLATE.md").stdout;
+const newIssueTemplate = issueTemplate.replace(
+  /-->[^]*$/,
+  "-->\n\n" +
+    formatMarkdown(
+      "// code snippet",
+      "// code snippet",
+      "",
+      pkg.version,
+      "https://prettier.io/playground/#.....",
+      { parser: "babylon" },
+      [["# Options (if any):", true], ["--single-quote", true]],
+      true
+    )
 );
+pipe(newIssueTemplate).to(".github/ISSUE_TEMPLATE.md");
 
 shell.echo("Copy sw-toolbox.js to docs");
 shell.cp("node_modules/sw-toolbox/sw-toolbox.js", `${docs}/sw-toolbox.js`);

website/pages/playground/index.html

@@ -23,6 +23,7 @@
   <link rel="stylesheet" crossorigin  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css">
   <link rel="stylesheet" crossorigin  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/neat.css">
 
+  <script src="/markdown.js"></script>
   <script src="/playground.js"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js"></script>

website/static/markdown.js

@@ -0,0 +1,87 @@
+/* eslint-env browser */
+/* eslint no-var: off, strict: off, prefer-arrow-callback: off */
+
+// NOTE: This file must work both in the playground, and in the build scripts to
+// generate the issue template.
+
+(function() {
+  function formatMarkdown(
+    input,
+    output,
+    output2,
+    version,
+    url,
+    options,
+    cliOptions,
+    full
+  ) {
+    var syntax = getMarkdownSyntax(options);
+    var optionsString = formatCLIOptions(cliOptions);
+    var isIdempotent = output2 === "" || output === output2;
+
+    return [
+      "**Prettier " + version + "**",
+      "[Playground link](" + url + ")",
+      optionsString === "" ? null : codeBlock(optionsString),
+      "",
+      "**Input:**",
+      codeBlock(input, syntax),
+      "",
+      "**Output:**",
+      codeBlock(output, syntax)
+    ]
+      .concat(
+        isIdempotent
+          ? []
+          : ["", "**Second Output:**", codeBlock(output2, syntax)]
+      )
+      .concat(full ? ["", "**Expected behavior:**", ""] : [])
+      .filter(function(part) {
+        return part != null;
+      })
+      .join("\n");
+  }
+
+  function getMarkdownSyntax(options) {
+    switch (options.parser) {
+      case "babylon":
+      case "flow":
+        return "jsx";
+      case "typescript":
+        return "tsx";
+      case "postcss":
+        return "scss";
+      default:
+        return options.parser;
+    }
+  }
+
+  function formatCLIOptions(cliOptions) {
+    return cliOptions
+      .map(function(option) {
+        var name = option[0];
+        var value = option[1];
+        return value === true ? name : name + " " + value;
+      })
+      .join("\n");
+  }
+
+  function codeBlock(content, syntax) {
+    var backtickSequences = content.match(/`+/g) || [];
+    var longestBacktickSequenceLength = Math.max.apply(
+      null,
+      backtickSequences.map(function(backticks) {
+        return backticks.length;
+      })
+    );
+    var fenceLength = Math.max(3, longestBacktickSequenceLength + 1);
+    var fence = Array(fenceLength + 1).join("`");
+    return [fence + (syntax || ""), content, fence].join("\n");
+  }
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = formatMarkdown;
+  } else {
+    window.formatMarkdown = formatMarkdown;
+  }
+})();

website/static/playground.js

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 /* eslint no-var: off, strict: off, prefer-arrow-callback: off */
-/* global Clipboard CodeMirror */
+/* global Clipboard CodeMirror formatMarkdown */
 
 var prettierVersion = "?";
 var inputEditor;
@@ -62,7 +62,7 @@ worker.onmessage = function(message) {
           : message.data.formatted2 || ""
     );
     document.getElementById("button-report-issue").search =
-      "body=" + encodeURIComponent(createIssueTemplate());
+      "body=" + encodeURIComponent(createMarkdown(true));
   }
 };
 
@@ -224,10 +224,19 @@ function setCodemirrorMode(editor, mode) {
   CodeMirror.autoLoadMode(editor, mode);
 }
 
+function getCodemirrorMode(options) {
+  switch (options.parser) {
+    case "postcss":
+      return "css";
+    default:
+      return "javascript";
+  }
+}
+
 function formatAsync() {
   var options = getOptions();
 
-  var mode = util.getCodemirrorMode(options);
+  var mode = getCodemirrorMode(options);
   setCodemirrorMode(inputEditor, mode);
   setCodemirrorMode(outputEditor, mode);
   setCodemirrorMode(output2Editor, mode);
@@ -258,28 +267,25 @@ function formatAsync() {
   });
 }
 
-function createMarkdown() {
+function createMarkdown(full) {
   var input = inputEditor.getValue();
   var output = outputEditor.getValue();
   var output2 = output2Editor.getValue();
   var options = getOptions();
   var cliOptions = getCLIOptions();
-  var markdown = util.formatMarkdown(
+  var markdown = formatMarkdown(
     input,
     output,
-    output2,
+    output2 === IDEMPOTENT_MESSAGE ? "" : output2,
     prettierVersion,
     window.location.href,
     options,
-    cliOptions
+    cliOptions,
+    full
   );
   return markdown;
 }
 
-function createIssueTemplate() {
-  return [createMarkdown(), "", "**Expected behavior:**", ""].join("\n");
-}
-
 function showTooltip(elem, text) {
   var tooltip = document.createElement("span");
   tooltip.className = "tooltip";
@@ -289,93 +295,3 @@ function showTooltip(elem, text) {
     elem.removeChild(tooltip);
   }, 2000);
 }
-
-var util = (function() {
-  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 + "**",
-      "[Playground link](" + url + ")",
-      optionsString === "" ? null : codeBlock(optionsString),
-      "",
-      "**Input:**",
-      codeBlock(input, syntax),
-      "",
-      "**Output:**",
-      codeBlock(output, syntax)
-    ]
-      .concat(
-        isIdempotent
-          ? []
-          : ["", "**Second Output:**", codeBlock(output2, syntax)]
-      )
-      .filter(function(part) {
-        return part != null;
-      })
-      .join("\n");
-  }
-
-  function getMarkdownSyntax(options) {
-    switch (options.parser) {
-      case "babylon":
-      case "flow":
-        return "jsx";
-      case "typescript":
-        return "tsx";
-      case "postcss":
-        return "scss";
-      default:
-        return options.parser;
-    }
-  }
-
-  function getCodemirrorMode(options) {
-    switch (options.parser) {
-      case "postcss":
-        return "css";
-      default:
-        return "javascript";
-    }
-  }
-
-  function formatCLIOptions(cliOptions) {
-    return cliOptions
-      .map(function(option) {
-        var name = option[0];
-        var value = option[1];
-        return value === true ? name : name + " " + value;
-      })
-      .join("\n");
-  }
-
-  function codeBlock(content, syntax) {
-    var backtickSequences = content.match(/`+/g) || [];
-    var longestBacktickSequenceLength = Math.max.apply(
-      null,
-      backtickSequences.map(function(backticks) {
-        return backticks.length;
-      })
-    );
-    var fenceLength = Math.max(3, longestBacktickSequenceLength + 1);
-    var fence = Array(fenceLength + 1).join("`");
-    return [fence + (syntax || ""), content, fence].join("\n");
-  }
-
-  return {
-    formatMarkdown: formatMarkdown,
-    getMarkdownSyntax: getMarkdownSyntax,
-    getCodemirrorMode: getCodemirrorMode
-  };
-})();

website/static/service-worker.js

@@ -13,6 +13,7 @@ toolbox.precache([
   "lib/parser-postcss.js",
   "lib/parser-flow.js",
   "lib/parser-graphql.js",
+  "markdown.js",
   "playground.js",
   "lib/sw-toolbox.js",
   "lib/sw-toolbox-companion.js",