2017-06-13 19:20:13 +03:00
|
|
|
/* eslint-env browser */
|
|
|
|
/* eslint no-var: off, strict: off, prefer-arrow-callback: off */
|
2017-09-10 21:09:06 +03:00
|
|
|
/* global Clipboard CodeMirror prettierVersion */
|
2017-06-13 19:20:13 +03:00
|
|
|
|
2017-06-18 13:25:27 +03:00
|
|
|
var state = (function loadState(hash) {
|
|
|
|
try {
|
|
|
|
return JSON.parse(hash);
|
|
|
|
} catch (error) {
|
|
|
|
return {
|
|
|
|
options: undefined,
|
|
|
|
content:
|
|
|
|
'hello ( "world"\n);\n\n' +
|
2017-07-08 15:07:39 +03:00
|
|
|
'[ "lorem", "ipsum", \'dolor\', sit("amet"), consectetur[ \'adipiscing\' ] + "elit" ].reduce(\n (first, second) => first + second,\n "")\n\n' +
|
|
|
|
"const Foo = ({ bar, baz, things }) => {\n" +
|
|
|
|
' return <div style={{\ncolor: "papayawhip"}}>\n' +
|
|
|
|
" <br/>{things.map(thing => reallyLongPleaseDontPutOnOneLine(thing) ? <p>{ok}</p> : <Quax bar={bar} baz={ baz } {...thing}></Quax>)\n" +
|
|
|
|
" }</div>}"
|
2017-06-18 13:25:27 +03:00
|
|
|
};
|
|
|
|
}
|
|
|
|
})(decodeURIComponent(location.hash.slice(1)));
|
|
|
|
|
2017-07-02 03:14:24 +03:00
|
|
|
var worker = new Worker("/worker.js");
|
2017-06-18 13:25:27 +03:00
|
|
|
// Warm up the worker (load the current parser while CodeMirror loads)
|
|
|
|
worker.postMessage({ text: "", options: state.options });
|
|
|
|
|
|
|
|
window.onload = function() {
|
2017-06-13 19:20:13 +03:00
|
|
|
var OPTIONS = [
|
|
|
|
"printWidth",
|
|
|
|
"tabWidth",
|
|
|
|
"singleQuote",
|
|
|
|
"trailingComma",
|
|
|
|
"bracketSpacing",
|
|
|
|
"jsxBracketSameLine",
|
|
|
|
"parser",
|
|
|
|
"semi",
|
|
|
|
"useTabs",
|
2017-06-18 13:25:27 +03:00
|
|
|
"doc",
|
|
|
|
"ast"
|
2017-06-13 19:20:13 +03:00
|
|
|
];
|
2017-06-18 13:25:27 +03:00
|
|
|
state.options && setOptions(state.options);
|
|
|
|
|
2017-06-13 19:20:13 +03:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2017-09-10 21:09:06 +03:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2017-06-13 19:20:13 +03:00
|
|
|
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();
|
|
|
|
|
2017-09-11 20:55:15 +03:00
|
|
|
var mode = util.getCodemirrorMode(options);
|
|
|
|
inputEditor.setOption("mode", mode);
|
|
|
|
outputEditor.setOption("mode", mode);
|
|
|
|
CodeMirror.autoLoadMode(inputEditor, mode);
|
|
|
|
CodeMirror.autoLoadMode(outputEditor, mode);
|
|
|
|
|
2017-06-18 13:25:27 +03:00
|
|
|
outputEditor.setOption("rulers", [
|
|
|
|
{ column: options.printWidth, color: "#444444" }
|
|
|
|
]);
|
|
|
|
document.querySelector(".ast").style.display = options.ast
|
|
|
|
? "flex"
|
|
|
|
: "none";
|
|
|
|
document.querySelector(".doc").style.display = options.doc
|
2017-06-13 19:20:13 +03:00
|
|
|
? "flex"
|
|
|
|
: "none";
|
|
|
|
|
|
|
|
var value = encodeURIComponent(
|
|
|
|
JSON.stringify(
|
|
|
|
Object.assign({ content: inputEditor.getValue(), options: options })
|
|
|
|
)
|
|
|
|
);
|
|
|
|
replaceHash(value);
|
|
|
|
worker.postMessage({
|
|
|
|
text: inputEditor.getValue(),
|
2017-06-18 13:25:27 +03:00
|
|
|
options: options,
|
|
|
|
ast: options.ast,
|
2017-06-13 19:20:13 +03:00
|
|
|
doc: options.doc
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-09-10 21:09:06 +03:00
|
|
|
function createMarkdown() {
|
|
|
|
var input = inputEditor.getValue();
|
|
|
|
var output = outputEditor.getValue();
|
|
|
|
var options = getOptions();
|
|
|
|
var cliOptions = getCLIOptions();
|
|
|
|
var markdown = util.formatMarkdown(
|
|
|
|
input,
|
|
|
|
output,
|
|
|
|
prettierVersion,
|
|
|
|
window.location.href,
|
|
|
|
options,
|
|
|
|
cliOptions
|
|
|
|
);
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2017-09-11 20:55:15 +03:00
|
|
|
CodeMirror.modeURL =
|
|
|
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/%N/%N.js";
|
|
|
|
|
2017-06-13 19:20:13 +03:00
|
|
|
var editorOptions = {
|
|
|
|
lineNumbers: true,
|
|
|
|
keyMap: "sublime",
|
|
|
|
autoCloseBrackets: true,
|
|
|
|
matchBrackets: true,
|
|
|
|
showCursorWhenSelecting: true,
|
|
|
|
theme: "neat",
|
|
|
|
tabWidth: 2
|
|
|
|
};
|
|
|
|
var 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" }
|
|
|
|
);
|
2017-06-18 13:25:27 +03:00
|
|
|
var astEditor = CodeMirror.fromTextArea(
|
|
|
|
document.getElementById("ast-editor"),
|
|
|
|
{ readOnly: true, lineNumbers: false, theme: "neat" }
|
|
|
|
);
|
2017-06-13 19:20:13 +03:00
|
|
|
var outputEditor = CodeMirror.fromTextArea(
|
|
|
|
document.getElementById("output-editor"),
|
|
|
|
{ readOnly: true, lineNumbers: true, theme: "neat" }
|
|
|
|
);
|
|
|
|
|
2017-06-18 13:25:27 +03:00
|
|
|
Array.from(document.querySelectorAll("textarea")).forEach(function(element) {
|
|
|
|
element.classList.remove("loading");
|
|
|
|
});
|
|
|
|
|
2017-06-13 19:20:13 +03:00
|
|
|
worker.onmessage = function(message) {
|
|
|
|
outputEditor.setValue(message.data.formatted);
|
|
|
|
docEditor.setValue(message.data.doc || "");
|
2017-06-18 13:25:27 +03:00
|
|
|
astEditor.setValue(message.data.ast || "");
|
2017-06-13 19:20:13 +03:00
|
|
|
};
|
|
|
|
|
2017-06-18 13:25:27 +03:00
|
|
|
inputEditor.setValue(state.content);
|
|
|
|
document.querySelector(".options-container").onchange = formatAsync;
|
|
|
|
document.querySelector(".version").innerText = prettierVersion;
|
2017-09-10 21:09:06 +03:00
|
|
|
|
|
|
|
var clipboard = new Clipboard(".copy-markdown", {
|
|
|
|
text: function() {
|
|
|
|
return createMarkdown();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
clipboard.on("success", function(e) {
|
|
|
|
showTooltip(e.trigger, "Copied!");
|
|
|
|
});
|
|
|
|
clipboard.on("error", function(e) {
|
|
|
|
showTooltip(e.trigger, "Press ctrl+c to copy");
|
|
|
|
});
|
2017-06-18 13:25:27 +03:00
|
|
|
};
|
2017-09-10 21:09:06 +03:00
|
|
|
|
|
|
|
var util = (function() {
|
|
|
|
function formatMarkdown(input, output, version, url, options, cliOptions) {
|
|
|
|
var syntax = getMarkdownSyntax(options);
|
|
|
|
var optionsString = formatCLIOptions(cliOptions);
|
|
|
|
|
|
|
|
return [
|
|
|
|
"**Prettier " + version + " / master**",
|
|
|
|
"[Playground link](" + url + ")",
|
|
|
|
optionsString === "" ? null : codeBlock(optionsString),
|
|
|
|
"",
|
|
|
|
"**Input:**",
|
|
|
|
codeBlock(input, syntax),
|
|
|
|
"",
|
|
|
|
"**Output:**",
|
|
|
|
codeBlock(output, 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-11 20:55:15 +03:00
|
|
|
function getCodemirrorMode(options) {
|
|
|
|
switch (options.parser) {
|
|
|
|
case "postcss":
|
|
|
|
return "css";
|
|
|
|
default:
|
|
|
|
return "javascript";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-10 21:09:06 +03:00
|
|
|
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,
|
2017-09-11 20:55:15 +03:00
|
|
|
getMarkdownSyntax: getMarkdownSyntax,
|
|
|
|
getCodemirrorMode: getCodemirrorMode
|
2017-09-10 21:09:06 +03:00
|
|
|
};
|
|
|
|
})();
|