more stuff

This commit is contained in:
Lucas Duailibe committed 2018-04-12 13:28:28 -03:00
1 parent c08aa1e4f8
commit 1c8dd0c1e7
11 files changed
+164 -206

No files matched your search

+1 -1
View File
@@ -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");
+1
View File
@@ -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",
+1 -100
View File
@@ -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>
-5
View File
@@ -1,5 +0,0 @@
import React from "react";
export default function(props) {
return <button type="button" className="btn" {...props} />;
}
+27 -14
View File
@@ -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>
+9
View File
@@ -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} />;
}
+68
View File
@@ -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;
+31
View File
@@ -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;
}
}
-85
View File
@@ -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;
}
})();
-1
View File
@@ -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",
+26
View File
@@ -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"