+
+
+
+
+
+
Options
-
-
\n' +
- "
{things.map(thing => reallyLongPleaseDontPutOnOneLine(thing) ?
{ok}
:
)\n" +
- " }
",
+ "",
+ " { greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }",
+ ' {greeting.endsWith(",") ? " " : ", " }',
+ " ",
+ "\t{ greeted }",
+ "\t",
+ " { (silent)",
+ ' ? "."',
+ ' : "!"}',
+ "",
+ "
;",
+ "",
+ "}"
+ ].join("\n")
};
}
})(decodeURIComponent(location.hash.slice(1)));
var worker = new Worker("/worker.js");
+
+worker.onmessage = function(message) {
+ if (prettierVersion === "?") {
+ prettierVersion = message.data.version;
+ document.getElementById("version").textContent = prettierVersion;
+ }
+ if (outputEditor && docEditor && astEditor) {
+ 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(createMarkdown(true));
+ }
+};
+
// Warm up the worker (load the current parser while CodeMirror loads)
worker.postMessage({ text: "", options: state.options });
window.onload = function() {
- var OPTIONS = [
- "printWidth",
- "tabWidth",
- "singleQuote",
- "trailingComma",
- "bracketSpacing",
- "jsxBracketSameLine",
- "parser",
- "semi",
- "useTabs",
- "doc",
- "ast"
- ];
state.options && setOptions(state.options);
- function setOptions(options) {
- OPTIONS.forEach(function(option) {
- var elem = document.getElementById(option);
- if (elem.tagName === "SELECT") {
- elem.value = options[option];
- } else if (elem.type === "number") {
- elem.value = options[option];
- } else {
- var isInverted = elem.hasAttribute("data-inverted");
- elem.checked = isInverted ? !options[option] : options[option];
- }
- });
- }
-
- function getOptions() {
- var options = {};
- OPTIONS.forEach(function(option) {
- var elem = document.getElementById(option);
- if (elem.tagName === "SELECT") {
- options[option] = elem.value;
- } else if (elem.type === "number") {
- options[option] = Number(elem.value);
- } else {
- var isInverted = elem.hasAttribute("data-inverted");
- options[option] = isInverted ? !elem.checked : elem.checked;
- }
- });
- return options;
- }
-
- function replaceHash(hash) {
- if (
- typeof URL === "function" &&
- typeof history === "object" &&
- typeof history.replaceState === "function"
- ) {
- var url = new URL(location);
- url.hash = hash;
- history.replaceState(null, null, url);
- } else {
- location.hash = hash;
- }
- }
-
- function formatAsync() {
- var options = getOptions();
-
- outputEditor.setOption("rulers", [
- { column: options.printWidth, color: "#444444" }
- ]);
- document.querySelector(".ast").style.display = options.ast
- ? "flex"
- : "none";
- document.querySelector(".doc").style.display = options.doc
- ? "flex"
- : "none";
-
- var value = encodeURIComponent(
- JSON.stringify(
- Object.assign({ content: inputEditor.getValue(), options: options })
- )
- );
- replaceHash(value);
- worker.postMessage({
- text: inputEditor.getValue(),
- options: options,
- ast: options.ast,
- doc: options.doc
- });
- }
-
var editorOptions = {
lineNumbers: true,
keyMap: "sublime",
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
- theme: "neat",
- tabWidth: 2
+ tabWidth: 2,
+ mode: "jsx"
};
- var inputEditor = CodeMirror.fromTextArea(
+ inputEditor = CodeMirror.fromTextArea(
document.getElementById("input-editor"),
editorOptions
);
inputEditor.on("change", formatAsync);
- var docEditor = CodeMirror.fromTextArea(
- document.getElementById("doc-editor"),
- { readOnly: true, lineNumbers: false, theme: "neat" }
- );
- var astEditor = CodeMirror.fromTextArea(
- document.getElementById("ast-editor"),
- { readOnly: true, lineNumbers: false, theme: "neat" }
- );
- var outputEditor = CodeMirror.fromTextArea(
- document.getElementById("output-editor"),
- { readOnly: true, lineNumbers: true, theme: "neat" }
- );
-
- Array.from(document.querySelectorAll("textarea")).forEach(function(element) {
- element.classList.remove("loading");
+ docEditor = CodeMirror.fromTextArea(document.getElementById("doc-editor"), {
+ readOnly: true,
+ lineNumbers: false,
+ mode: "jsx"
});
+ astEditor = CodeMirror.fromTextArea(document.getElementById("ast-editor"), {
+ readOnly: true,
+ lineNumbers: false,
+ mode: "jsx"
+ });
+ outputEditor = CodeMirror.fromTextArea(
+ document.getElementById("output-editor"),
+ {
+ readOnly: true,
+ lineNumbers: true,
+ mode: "jsx"
+ }
+ );
+ output2Editor = CodeMirror.fromTextArea(
+ document.getElementById("output2-editor"),
+ {
+ readOnly: true,
+ lineNumbers: true,
+ mode: "jsx"
+ }
+ );
- worker.onmessage = function(message) {
- outputEditor.setValue(message.data.formatted);
- docEditor.setValue(message.data.doc || "");
- astEditor.setValue(message.data.ast || "");
- };
+ var editors = document.querySelectorAll(".editor");
+ for (var i = 0; i < editors.length; i++) {
+ editors[i].classList.remove("loading");
+ }
inputEditor.setValue(state.content);
document.querySelector(".options-container").onchange = formatAsync;
- document.querySelector(".version").innerText = prettierVersion;
+
+ document.getElementById("button-clear").onclick = function() {
+ inputEditor.setValue("");
+ };
+
+ var clipboard = new Clipboard("#button-copy-link, #button-copy-markdown", {
+ text: function(trigger) {
+ switch (trigger.id) {
+ case "button-copy-link":
+ return window.location.href;
+ case "button-copy-markdown":
+ return createMarkdown();
+ default:
+ return "";
+ }
+ }
+ });
+ clipboard.on("success", function(e) {
+ showTooltip(e.trigger, "Copied!");
+ });
+ clipboard.on("error", function(e) {
+ showTooltip(e.trigger, "Press ctrl+c to copy");
+ });
};
+
+function setOptions(options) {
+ OPTIONS.forEach(function(option) {
+ var elem = document.getElementById(option);
+ if (elem.tagName === "SELECT") {
+ elem.value = options[option];
+ } else if (elem.type === "number") {
+ elem.value = options[option];
+ } else {
+ var isInverted = elem.hasAttribute("data-inverted");
+ elem.checked = isInverted ? !options[option] : options[option];
+ }
+ });
+}
+
+function getOptions() {
+ var options = {};
+ OPTIONS.forEach(function(option) {
+ var elem = document.getElementById(option);
+ if (elem.tagName === "SELECT") {
+ options[option] = elem.value;
+ } else if (elem.type === "number") {
+ options[option] = Number(elem.value);
+ } else {
+ var isInverted = elem.hasAttribute("data-inverted");
+ options[option] = isInverted ? !elem.checked : elem.checked;
+ }
+ });
+ return options;
+}
+
+function getCLIOptions() {
+ return OPTIONS.sort()
+ .map(function(option) {
+ var elem = document.getElementById(option);
+ var match = elem.parentNode.textContent.match(/--\S+/);
+ if (!match) {
+ return null;
+ }
+ var name = match[0];
+ if (elem.tagName === "SELECT") {
+ if (elem.value === elem.options[0].value) {
+ return null;
+ }
+ return [name, elem.value];
+ } else if (elem.type === "number") {
+ if (elem.value === elem.getAttribute("value")) {
+ return null;
+ }
+ return [name, elem.value];
+ } else if (elem.type === "checkbox") {
+ if (!elem.checked) {
+ return null;
+ }
+ return [name, true];
+ }
+ return null;
+ })
+ .filter(Boolean);
+}
+
+function replaceHash(hash) {
+ if (
+ typeof URL === "function" &&
+ typeof history === "object" &&
+ typeof history.replaceState === "function"
+ ) {
+ var url = new URL(location);
+ url.hash = hash;
+ history.replaceState(null, null, url);
+ } else {
+ location.hash = hash;
+ }
+}
+
+function getCodemirrorMode(options) {
+ switch (options.parser) {
+ case "postcss":
+ return "css";
+ default:
+ return "jsx";
+ }
+}
+
+function formatAsync() {
+ var options = getOptions();
+
+ var mode = getCodemirrorMode(options);
+ inputEditor.setOption("mode", mode);
+ outputEditor.setOption("mode", mode);
+ output2Editor.setOption("mode", mode);
+
+ [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(
+ Object.assign({ content: inputEditor.getValue(), options: options })
+ )
+ );
+ replaceHash(value);
+ worker.postMessage({
+ text: inputEditor.getValue(),
+ options: options,
+ ast: options.ast,
+ doc: options.doc,
+ formatted2: options.output2
+ });
+}
+
+function createMarkdown(full) {
+ var input = inputEditor.getValue();
+ var output = outputEditor.getValue();
+ var output2 = output2Editor.getValue();
+ var options = getOptions();
+ var cliOptions = getCLIOptions();
+ var markdown = formatMarkdown(
+ input,
+ output,
+ output2 === IDEMPOTENT_MESSAGE ? "" : output2,
+ prettierVersion,
+ window.location.href,
+ options,
+ cliOptions,
+ full
+ );
+ return markdown;
+}
+
+function showTooltip(elem, text) {
+ var tooltip = document.createElement("span");
+ tooltip.className = "tooltip";
+ tooltip.textContent = text;
+ elem.appendChild(tooltip);
+ window.setTimeout(function() {
+ elem.removeChild(tooltip);
+ }, 2000);
+}
diff --git a/website/static/service-worker.js b/website/static/service-worker.js
index b6ee9ec5..6dcc9bcc 100644
--- a/website/static/service-worker.js
+++ b/website/static/service-worker.js
@@ -7,22 +7,24 @@ importScripts("lib/sw-toolbox.js");
toolbox.precache([
// Scripts
- "lib/prettier-version.js",
"lib/index.js",
"lib/parser-babylon.js",
"lib/parser-typescript.js",
"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",
// CodeMirror
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css",
- "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/neat.css",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js",
+ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/xml/xml.js",
+ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/jsx/jsx.js",
+ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/css/css.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js",
@@ -30,6 +32,7 @@ toolbox.precache([
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/comment/comment.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/wrap/hardwrap.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/keymap/sublime.js",
+ "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js",
// Images
"/prettier.png"
diff --git a/website/static/worker.js b/website/static/worker.js
index 36d764a7..ac67e8ba 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -27,20 +27,29 @@ 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;
+ var errored = false;
try {
- ast = JSON.stringify(
- prettier.__debug.parse(message.data.text, options),
- null,
- 2
- );
+ actualAst = prettier.__debug.parse(message.data.text, options);
+ ast = JSON.stringify(actualAst);
} catch (e) {
- ast = e.toString();
+ errored = true;
+ ast = String(e);
+ }
+ if (!errored) {
+ try {
+ ast = formatCode(ast, { parser: "json" });
+ } catch (e) {
+ ast = JSON.stringify(actualAst, null, 2);
+ }
}
}
@@ -52,11 +61,21 @@ self.onmessage = function(message) {
{ parser: "babylon" }
);
} catch (e) {
- doc = e.toString();
+ doc = String(e);
}
}
- self.postMessage({ formatted: formatted, doc: doc, ast: ast });
+ if (message.data.formatted2) {
+ formatted2 = formatCode(formatted, options);
+ }
+
+ self.postMessage({
+ formatted: formatted,
+ doc: doc,
+ ast: ast,
+ formatted2: formatted2,
+ version: prettier.version
+ });
};
function formatCode(text, options) {
@@ -70,7 +89,7 @@ function formatCode(text, options) {
lazyLoadParser(e.parser);
return formatCode(text, options);
}
- return e.toString();
+ return String(e);
}
}
-