more stuff
This commit is contained in:
1 parent
c08aa1e4f8
commit
1c8dd0c1e7
11 files changed
+164
-206
No files matched your search
@@ -4,7 +4,7 @@
|
||||
|
||||
const path = require("path");
|
||||
const pkg = require("../../package.json");
|
||||
const formatMarkdown = require("../../website/static/markdown");
|
||||
const formatMarkdown = require("../../website/playground/markdown");
|
||||
const parsers = require("./parsers");
|
||||
const shell = require("shelljs");
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
"svgo-all": "find static | grep '\\.svg$' | xargs -Iz -n 1 yarn svgo z"
|
||||
},
|
||||
"dependencies": {
|
||||
"clipboard": "2.0.0",
|
||||
"codemirror": "5.36.0",
|
||||
"codemirror-graphql": "0.6.12",
|
||||
"lz-string": "1.4.4",
|
||||
|
||||
@@ -22,8 +22,6 @@
|
||||
|
||||
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.css">
|
||||
|
||||
<script src="/markdown.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.js"></script>
|
||||
@@ -38,7 +36,7 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/comment/comment.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/wrap/hardwrap.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/keymap/sublime.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
|
||||
@@ -77,103 +75,6 @@
|
||||
|
||||
<script src="/playground.js"></script>
|
||||
|
||||
<!-- <div class="editors-container">
|
||||
<div id="options-details" class="options-container">
|
||||
<div class="options">
|
||||
<details class="sub-options" open>
|
||||
<summary>Global</summary>
|
||||
|
||||
<label>--parser
|
||||
<select id="parser">
|
||||
<option value="babylon">babylon</option>
|
||||
<option value="flow">flow</option>
|
||||
<option value="typescript">typescript</option>
|
||||
<option value="css">css</option>
|
||||
<option value="less">less</option>
|
||||
<option value="scss">scss</option>
|
||||
<option value="json">json</option>
|
||||
<option value="graphql">graphql</option>
|
||||
<option value="markdown">markdown</option>
|
||||
<option value="vue">vue</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>--print-width <input type="number" value="80" min="0" id="printWidth"></label>
|
||||
<label>--tab-width <input type="number" min="0" value="2" id="tabWidth"></label>
|
||||
<label><input type="checkbox" id="useTabs"> --use-tabs</label>
|
||||
</details>
|
||||
<details class="sub-options" open>
|
||||
<summary>JavaScript</summary>
|
||||
|
||||
<label><input type="checkbox" data-inverted id="semi"> --no-semi</label>
|
||||
<label><input type="checkbox" id="singleQuote"> --single-quote</label>
|
||||
<label><input type="checkbox" data-inverted id="bracketSpacing"> --no-bracket-spacing</label>
|
||||
<label><input type="checkbox" id="jsxBracketSameLine"> --jsx-bracket-same-line</label>
|
||||
<label>--arrow-parens
|
||||
<select id="arrowParens">
|
||||
<option value="avoid">avoid</option>
|
||||
<option value="always">always</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>--trailing-comma
|
||||
<select id="trailingComma">
|
||||
<option value="none">none</option>
|
||||
<option value="es5">es5</option>
|
||||
<option value="all">all</option>
|
||||
</select>
|
||||
</label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Markdown</summary>
|
||||
|
||||
<label>--prose-wrap
|
||||
<select id="proseWrap">
|
||||
<option value="preserve">preserve</option>
|
||||
<option value="always">always</option>
|
||||
<option value="never">never</option>
|
||||
</select>
|
||||
</label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Special</summary>
|
||||
|
||||
<label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
|
||||
<label><input type="checkbox" id="requirePragma"> --require-pragma</label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Range</summary>
|
||||
<label>The selected range will be highlighted in yellow in the input editor</label>
|
||||
<label>--range-start <input type="number" value="" min="0" id="rangeStart"></label>
|
||||
<label>--range-end <input type="number" value="" min="0" id="rangeEnd"></label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Debug</summary>
|
||||
|
||||
<label><input type="checkbox" id="ast"> show AST</label>
|
||||
<label><input type="checkbox" id="doc"> show doc</label>
|
||||
<label><input type="checkbox" id="output2"> show second format</label>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editors">
|
||||
<div class="editor loading input">
|
||||
<textarea id="input-editor"></textarea>
|
||||
</div>
|
||||
<div class="editor loading ast">
|
||||
<textarea id="ast-editor"></textarea>
|
||||
</div>
|
||||
<div class="editor loading doc">
|
||||
<textarea id="doc-editor"></textarea>
|
||||
</div>
|
||||
<div class="editor loading output">
|
||||
<textarea id="output-editor"></textarea>
|
||||
</div>
|
||||
<div class="editor loading output2">
|
||||
<textarea id="output2-editor"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<script src="/install-service-worker.js"></script>
|
||||
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function(props) {
|
||||
return <button type="button" className="btn" {...props} />;
|
||||
}
|
||||
@@ -1,9 +1,12 @@
|
||||
import React from "react";
|
||||
|
||||
import Button from "./Button";
|
||||
import { Button, LinkButton } from "./buttons";
|
||||
import EditorState from "./EditorState";
|
||||
import { DebugPanel, InputPanel, OutputPanel } from "./panels";
|
||||
import PrettierFormat from "./PrettierFormat";
|
||||
import { shallowEqual } from "./helpers";
|
||||
import * as urlHash from "./urlHash";
|
||||
import formatMarkdown from "./markdown";
|
||||
|
||||
import { Sidebar, SidebarCategory } from "./sidebar/components";
|
||||
import Option from "./sidebar/options";
|
||||
@@ -32,11 +35,15 @@ const ENABLED_OPTIONS = [
|
||||
class Playground extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
content: "",
|
||||
loaded: false,
|
||||
options: null
|
||||
};
|
||||
|
||||
this.state = Object.assign(
|
||||
{
|
||||
content: "",
|
||||
loaded: false,
|
||||
options: null
|
||||
},
|
||||
urlHash.read()
|
||||
);
|
||||
this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
|
||||
|
||||
this.setContent = content => this.setState({ content });
|
||||
@@ -63,6 +70,16 @@ class Playground extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(_, prevState) {
|
||||
const { content, options } = this.state;
|
||||
if (
|
||||
!shallowEqual(prevState.options, this.state.options) ||
|
||||
prevState.content !== content
|
||||
) {
|
||||
urlHash.replace({ content, options });
|
||||
}
|
||||
}
|
||||
|
||||
handleOptionValueChange(option, value) {
|
||||
this.setState(state => ({
|
||||
options: Object.assign({}, state.options, { [option.name]: value })
|
||||
@@ -70,13 +87,7 @@ class Playground extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
availableOptions,
|
||||
content,
|
||||
loaded,
|
||||
options,
|
||||
showSidebar
|
||||
} = this.state;
|
||||
const { availableOptions, content, loaded, options } = this.state;
|
||||
|
||||
if (!loaded) return "Loading...";
|
||||
|
||||
@@ -157,7 +168,9 @@ class Playground extends React.Component {
|
||||
<div className="bottom-bar-buttons bottom-bar-buttons-right">
|
||||
<Button>Copy link</Button>
|
||||
<Button>Copy markdown</Button>
|
||||
<Button>Report issue</Button>
|
||||
<LinkButton href="#" target="_blank" rel="noopener">
|
||||
Report issue
|
||||
</LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
export function Button(props) {
|
||||
return <button type="button" className="btn" {...props} />;
|
||||
}
|
||||
|
||||
export function LinkButton(props) {
|
||||
return <a className="btn" $ {...props} />;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
function formatMarkdown(
|
||||
input,
|
||||
output,
|
||||
output2,
|
||||
version,
|
||||
url,
|
||||
options,
|
||||
cliOptions,
|
||||
full
|
||||
) {
|
||||
const syntax = getMarkdownSyntax(options);
|
||||
const optionsString = formatCLIOptions(cliOptions);
|
||||
const isIdempotent = output2 === "" || output === output2;
|
||||
|
||||
return [
|
||||
`**Prettier ${version}**`,
|
||||
`[Playground link](${url})`,
|
||||
optionsString === "" ? null : codeBlock(optionsString, "sh"),
|
||||
"",
|
||||
"**Input:**",
|
||||
codeBlock(input, syntax),
|
||||
"",
|
||||
"**Output:**",
|
||||
codeBlock(output, syntax)
|
||||
]
|
||||
.concat(
|
||||
isIdempotent ? [] : ["", "**Second Output:**", codeBlock(output2, syntax)]
|
||||
)
|
||||
.concat(full ? ["", "**Expected behavior:**", ""] : [])
|
||||
.filter(part => {
|
||||
return part != null;
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
function getMarkdownSyntax(options) {
|
||||
switch (options.parser) {
|
||||
case "babylon":
|
||||
case "flow":
|
||||
return "jsx";
|
||||
case "typescript":
|
||||
return "tsx";
|
||||
default:
|
||||
return options.parser;
|
||||
}
|
||||
}
|
||||
|
||||
function formatCLIOptions(cliOptions) {
|
||||
return cliOptions
|
||||
.map(option => {
|
||||
const [name, value] = option;
|
||||
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(backticks => backticks.length)
|
||||
);
|
||||
var fenceLength = Math.max(3, longestBacktickSequenceLength + 1);
|
||||
var fence = Array(fenceLength + 1).join("`");
|
||||
return [fence + (syntax || ""), content, fence].join("\n");
|
||||
}
|
||||
|
||||
module.exports = formatMarkdown;
|
||||
@@ -0,0 +1,31 @@
|
||||
import LZString from "lz-string";
|
||||
|
||||
export function read() {
|
||||
const hash = document.location.hash.slice(1);
|
||||
// backwards support for old json encoded URIComponent
|
||||
const decode =
|
||||
hash.indexOf("%7B%22") !== -1
|
||||
? decodeURIComponent
|
||||
: LZString.decompressFromEncodedURIComponent;
|
||||
|
||||
try {
|
||||
return JSON.parse(decode(hash));
|
||||
} catch (_) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function replace(state) {
|
||||
const hash = LZString.compressToEncodedURIComponent(JSON.stringify(state));
|
||||
if (
|
||||
typeof URL === "function" &&
|
||||
typeof history === "object" &&
|
||||
typeof history.replaceState === "function"
|
||||
) {
|
||||
const url = new URL(location);
|
||||
url.hash = hash;
|
||||
history.replaceState(null, null, url);
|
||||
} else {
|
||||
location.hash = hash;
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
/* eslint-env browser */
|
||||
/* eslint no-var: off, strict: off, prefer-arrow-callback: off */
|
||||
|
||||
// NOTE: This file must work both in the playground, and in the build scripts to
|
||||
// generate the issue template.
|
||||
|
||||
(function() {
|
||||
function formatMarkdown(
|
||||
input,
|
||||
output,
|
||||
output2,
|
||||
version,
|
||||
url,
|
||||
options,
|
||||
cliOptions,
|
||||
full
|
||||
) {
|
||||
var syntax = getMarkdownSyntax(options);
|
||||
var optionsString = formatCLIOptions(cliOptions);
|
||||
var isIdempotent = output2 === "" || output === output2;
|
||||
|
||||
return [
|
||||
"**Prettier " + version + "**",
|
||||
"[Playground link](" + url + ")",
|
||||
optionsString === "" ? null : codeBlock(optionsString, "sh"),
|
||||
"",
|
||||
"**Input:**",
|
||||
codeBlock(input, syntax),
|
||||
"",
|
||||
"**Output:**",
|
||||
codeBlock(output, syntax)
|
||||
]
|
||||
.concat(
|
||||
isIdempotent
|
||||
? []
|
||||
: ["", "**Second Output:**", codeBlock(output2, syntax)]
|
||||
)
|
||||
.concat(full ? ["", "**Expected behavior:**", ""] : [])
|
||||
.filter(function(part) {
|
||||
return part != null;
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
function getMarkdownSyntax(options) {
|
||||
switch (options.parser) {
|
||||
case "babylon":
|
||||
case "flow":
|
||||
return "jsx";
|
||||
case "typescript":
|
||||
return "tsx";
|
||||
default:
|
||||
return options.parser;
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
if (typeof module !== "undefined" && module.exports) {
|
||||
module.exports = formatMarkdown;
|
||||
} else {
|
||||
window.formatMarkdown = formatMarkdown;
|
||||
}
|
||||
})();
|
||||
@@ -15,7 +15,6 @@ toolbox.precache([
|
||||
"lib/parser-glimmer.js",
|
||||
"lib/parser-graphql.js",
|
||||
"lib/parser-markdown.js",
|
||||
"markdown.js",
|
||||
"playground.js",
|
||||
"lib/sw-toolbox.js",
|
||||
|
||||
|
||||
@@ -1388,6 +1388,14 @@ cli-width@^2.0.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
|
||||
|
||||
clipboard@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.0.tgz#4661dc972fb72a4c4770b8db78aa9b1caef52b50"
|
||||
dependencies:
|
||||
good-listener "^1.2.2"
|
||||
select "^1.1.2"
|
||||
tiny-emitter "^2.0.0"
|
||||
|
||||
cliui@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc"
|
||||
@@ -1840,6 +1848,10 @@ delayed-stream@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
|
||||
delegate@^3.1.2:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
@@ -2566,6 +2578,12 @@ globby@^6.1.0:
|
||||
pify "^2.0.0"
|
||||
pinkie-promise "^2.0.0"
|
||||
|
||||
good-listener@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
|
||||
dependencies:
|
||||
delegate "^3.1.2"
|
||||
|
||||
got@^7.0.0:
|
||||
version "7.1.0"
|
||||
resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
|
||||
@@ -4776,6 +4794,10 @@ scoped-regex@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
|
||||
|
||||
select@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
|
||||
|
||||
"semver@2 || 3 || 4 || 5", semver@^5.5.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
|
||||
@@ -5290,6 +5312,10 @@ timers-browserify@^2.0.4:
|
||||
dependencies:
|
||||
setimmediate "^1.0.4"
|
||||
|
||||
tiny-emitter@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
|
||||
|
||||
tmp@^0.0.33:
|
||||
version "0.0.33"
|
||||
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
|
||||
|
||||
Reference in new issue
Block a user