vitalif
/
prettier
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(playground): add example placeholder (#3657) 

* feat(playground): add example placeholder

* Add TypeScript example

* fix: mock process.binding

* fix: add missing comma

* refactor: use legacy function

* fix: mock return `{}`

* Return the error stack when there’s a non-SyntaxError thrown

* Code style

* fix: mock path.resolve

* chore: cache placeholder.js

* fix mock path.resolve attempt 2

* fix: mock path.{parse,join,dirname}

* fix: mock process.cwd

* fix: mock path.parse root
master
Ika 2018-01-07 19:59:14 +08:00 committed by Jed Fox
parent 445b4afc73
commit 5e2e7a2881
5 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
website/pages/playground/index.html
View File

@ -31,6 +31,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/jsx/jsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/markdown/markdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/placeholder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js"></script>

89
website/static/playground.js
View File

@ -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 <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>",
"",
" <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>",
' {greeting.endsWith(",") ? " " : <span style={{color: \'\\grey\'}}>", "</span> }',
" <em>",
"\t{ greeted }",
"\t</em>",
" { (silent)",
' ? "."',
' : "!"}',
"",
" </div>;",
"",
"}"
].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 <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>",
"",
" <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>",
' {greeting.endsWith(",") ? " " : <span style={{color: \'\\grey\'}}>", "</span> }',
" <em>",
"\t{ greeted }",
"\t</em>",
" { (silent)",
' ? "."',
' : "!"}',
"",
" </div>;",
"",
"}"
].join("\n");
case "typescript":
return [
"interface MyInterface {",
" foo(): string,",
" bar: Array<number>,",
"}",
"",
"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 "";
}
}

4
website/static/separate-css/playground.css
View File

@ -132,6 +132,10 @@ header h1 {
line-height: 1.6;
}
pre.CodeMirror-placeholder {
color: #888888;
}
.bottom-bar {
position: relative;
}

1
website/static/service-worker.js
View File

@ -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",

28
website/static/worker.js
View File

@ -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);
}
}