diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html
index fd75d88a3..9401985d0 100644
--- a/website/pages/playground/index.html
+++ b/website/pages/playground/index.html
@@ -31,6 +31,7 @@
+
diff --git a/website/static/playground.js b/website/static/playground.js
index c807da282..a5bbfd0a2 100644
--- a/website/static/playground.js
+++ b/website/static/playground.js
@@ -34,29 +34,7 @@ var worker = new Worker("/worker.js");
const DEFAULT_OPTIONS = {
options: undefined,
- content: [
- 'function HelloWorld({greeting = "hello", greeted = \'"World"\', silent = false, onMouseOver,}) {',
- "",
- " if(!greeting){return null};",
- "",
- " // TODO: Don't use random in render",
- ' let num = Math.floor (Math.random() * 1E+7).toString().replace(/\\.\\d+/ig, "")',
- "",
- " return ",
- "",
- " { greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }",
- ' {greeting.endsWith(",") ? " " : ", " }',
- " ",
- "\t{ greeted }",
- "\t",
- " { (silent)",
- ' ? "."',
- ' : "!"}',
- "",
- "
;",
- "",
- "}"
- ].join("\n")
+ content: ""
};
window.onload = function() {
@@ -138,8 +116,6 @@ window.onload = function() {
document.getElementById("input-editor"),
editorOptions
);
- inputEditor.on("change", formatAsync);
-
docEditor = CodeMirror.fromTextArea(document.getElementById("doc-editor"), {
readOnly: true,
lineNumbers: false,
@@ -173,7 +149,11 @@ window.onload = function() {
}
setEditorStyles();
+
inputEditor.setValue(state.content);
+ inputEditor.on("change", formatAsync);
+ formatAsync();
+
document.querySelector(".options-container").onchange = formatAsync;
document.getElementById("button-clear").onclick = function() {
@@ -310,7 +290,7 @@ function formatAsync() {
);
replaceHash(value);
worker.postMessage({
- text: inputEditor.getValue(),
+ text: inputEditor.getValue() || getExample(options.parser),
options: options,
ast: options.ast,
doc: options.doc,
@@ -321,6 +301,8 @@ function formatAsync() {
function setEditorStyles() {
var options = getOptions();
+ inputEditor.setOption("placeholder", getExample(options.parser));
+
var mode = getCodemirrorMode(options);
inputEditor.setOption("mode", mode);
outputEditor.setOption("mode", mode);
@@ -343,10 +325,10 @@ function setEditorStyles() {
}
function createMarkdown(full) {
- var input = inputEditor.getValue();
var output = outputEditor.getValue();
var output2 = output2Editor.getValue();
var options = getOptions();
+ var input = inputEditor.getValue() || getExample(options.parser);
var cliOptions = getCLIOptions();
var markdown = formatMarkdown(
input,
@@ -370,3 +352,56 @@ function showTooltip(elem, text) {
elem.removeChild(tooltip);
}, 2000);
}
+
+function getExample(parser) {
+ switch (parser) {
+ case "babylon":
+ return [
+ 'function HelloWorld({greeting = "hello", greeted = \'"World"\', silent = false, onMouseOver,}) {',
+ "",
+ " if(!greeting){return null};",
+ "",
+ " // TODO: Don't use random in render",
+ ' let num = Math.floor (Math.random() * 1E+7).toString().replace(/\\.\\d+/ig, "")',
+ "",
+ " return ",
+ "",
+ " { greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }",
+ ' {greeting.endsWith(",") ? " " : ", " }',
+ " ",
+ "\t{ greeted }",
+ "\t",
+ " { (silent)",
+ ' ? "."',
+ ' : "!"}',
+ "",
+ "
;",
+ "",
+ "}"
+ ].join("\n");
+ case "typescript":
+ return [
+ "interface MyInterface {",
+ " foo(): string,",
+ " bar: Array,",
+ "}",
+ "",
+ "export abstract class Foo implements MyInterface {",
+ " foo() {",
+ " // TODO: return an actual value here",
+ " return 'hello'",
+ " }",
+ " get bar() {",
+ " return [ 1,",
+ "",
+ " 2, 3,",
+ " ]",
+ " }",
+ "}",
+ "",
+ "type RequestType = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'OPTIONS' | 'CONNECT' | 'DELETE' | 'TRACE'"
+ ].join("\n");
+ default:
+ return "";
+ }
+}
diff --git a/website/static/separate-css/playground.css b/website/static/separate-css/playground.css
index ed239bf53..566aef684 100644
--- a/website/static/separate-css/playground.css
+++ b/website/static/separate-css/playground.css
@@ -132,6 +132,10 @@ header h1 {
line-height: 1.6;
}
+pre.CodeMirror-placeholder {
+ color: #888888;
+}
+
.bottom-bar {
position: relative;
}
diff --git a/website/static/service-worker.js b/website/static/service-worker.js
index 9f53ed585..66bbe01a7 100644
--- a/website/static/service-worker.js
+++ b/website/static/service-worker.js
@@ -27,6 +27,7 @@ toolbox.precache([
"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/mode/markdown/markdown.js",
+ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/placeholder.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",
diff --git a/website/static/worker.js b/website/static/worker.js
index 060132853..ef6b6908b 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -5,6 +5,12 @@
self.global = self;
self.util = {};
self.path = {};
+self.path.resolve = self.path.join = self.path.dirname = function() {
+ return "";
+};
+self.path.parse = function() {
+ return { root: "" };
+};
self.Buffer = {
isBuffer: function() {
return false;
@@ -12,13 +18,23 @@ self.Buffer = {
};
self.constants = {};
// eslint-disable-next-line
-module$1 = module = path = os = crypto = {};
+module$1 = module = os = crypto = {};
self.fs = { readFile: function() {} };
// eslint-disable-next-line no-undef
os.homedir = function() {
return "/home/prettier";
};
-self.process = { argv: [], env: { PRETTIER_DEBUG: true }, version: "v8.5.0" };
+self.process = {
+ argv: [],
+ env: { PRETTIER_DEBUG: true },
+ version: "v8.5.0",
+ binding: function() {
+ return {};
+ },
+ cwd: function() {
+ return "";
+ }
+};
self.assert = { ok: function() {}, strictEqual: function() {} };
self.require = function require(path) {
if (path === "stream") {
@@ -111,6 +127,12 @@ function formatCode(text, options) {
try {
return prettier.format(text, options);
} catch (e) {
- return String(e);
+ if (e.constructor && e.constructor.name === "SyntaxError") {
+ // Likely something wrong with the user's code
+ return String(e);
+ }
+ // Likely a bug in Prettier
+ // Provide the whole stack for debugging
+ return e.stack || String(e);
}
}