diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 04c3249cf..d2c44cb5b 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.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
```
diff --git a/scripts/build/build.js b/scripts/build/build.js
index e7df784d7..4a321a579 100755
--- a/scripts/build/build.js
+++ b/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`);
diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html
index 45c1e0cec..a04711d72 100644
--- a/website/pages/playground/index.html
+++ b/website/pages/playground/index.html
@@ -23,6 +23,7 @@
+
diff --git a/website/static/markdown.js b/website/static/markdown.js
new file mode 100644
index 000000000..ac3b2e0fe
--- /dev/null
+++ b/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;
+ }
+})();
diff --git a/website/static/playground.js b/website/static/playground.js
index 63a6c8dd5..a95907d5e 100644
--- a/website/static/playground.js
+++ b/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
- };
-})();
diff --git a/website/static/service-worker.js b/website/static/service-worker.js
index 11149bdf7..78e7196ba 100644
--- a/website/static/service-worker.js
+++ b/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",