From 5e2e7a2881d07ff0aa4b4673becc9cb4ce2f6cae Mon Sep 17 00:00:00 2001 From: Ika Date: Sun, 7 Jan 2018 19:59:14 +0800 Subject: [PATCH] feat(playground): add example placeholder (#3657) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- website/pages/playground/index.html | 1 + website/static/playground.js | 89 +++++++++++++++------- website/static/separate-css/playground.css | 4 + website/static/service-worker.js | 1 + website/static/worker.js | 28 ++++++- 5 files changed, 93 insertions(+), 30 deletions(-) diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index fd75d88a..9401985d 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 c807da28..a5bbfd0a 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 ed239bf5..566aef68 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 9f53ed58..66bbe01a 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 06013285..ef6b6908 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); } }