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

second format

master
Lucas Duailibe 2018-04-17 13:40:55 -03:00
parent f420163e5a
commit f90560e6e9
5 changed files with 102 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
website/playground/EditorState.js
View File

@ -11,9 +11,12 @@ export default class extends React.Component {
showSidebar: false,
showAst: false,
showDoc: false,
showSecondFormat: false,
toggleSidebar: () => this.setState(stateToggler("showSidebar")),
toggleAst: () => this.setState(stateToggler("showAst")),
toggleDoc: () => this.setState(stateToggler("showDoc"))
toggleDoc: () => this.setState(stateToggler("showDoc")),
toggleSecondFormat: () =>
this.setState(stateToggler("showSecondFormat"))
},
storage.get("editor_state")
);

73
website/playground/Playground.js
View File

@ -54,6 +54,7 @@ class Playground extends React.Component {
this.setState(state => ({
options: getDefaultOptions(state.availableOptions)
}));
this.getCurrentUrl = () => window.location.href;
}
componentDidMount() {
@ -88,6 +89,20 @@ class Playground extends React.Component {
}));
}
getMarkdown(formatted, reformatted, full) {
const { availableOptions, content, options, version } = this.state;
return formatMarkdown(
content,
formatted,
reformatted || "",
version,
window.location.href,
options,
getCliOptions(availableOptions, options),
full
);
}
render() {
const { availableOptions, content, loaded, options } = this.state;
@ -104,8 +119,9 @@ class Playground extends React.Component {
options={options}
debugAst={editorState.showAst}
debugDoc={editorState.showDoc}
secondFormat={editorState.showSecondFormat}
>
{({ formatted, debugAst, debugDoc }) => (
{({ formatted, debugAst, debugDoc, reformatted }) => (
<React.Fragment>
<div className="editors-container">
<Sidebar visible={editorState.showSidebar}>
@ -126,6 +142,11 @@ class Playground extends React.Component {
checked={editorState.showDoc}
onChange={editorState.toggleDoc}
/>
<Checkbox
label="show second format"
checked={editorState.showSecondFormat}
onChange={editorState.toggleSecondFormat}
/>
</SidebarCategory>
<div className="sub-options">
<Button onClick={this.resetOptions}>
@ -151,6 +172,13 @@ class Playground extends React.Component {
value={formatted}
rulerColumn={options.printWidth}
/>
{editorState.showSecondFormat ? (
<OutputPanel
mode={getCodemirrorMode(options.parser)}
value={getSecondFormat(formatted, reformatted)}
rulerColumn={options.printWidth}
/>
) : null}
</div>
</div>
<div className="bottom-bar">
@ -161,11 +189,17 @@ class Playground extends React.Component {
<Button onClick={this.clearContent}>Clear</Button>
</div>
<div className="bottom-bar-buttons bottom-bar-buttons-right">
<ClipboardButton clipboardValue={window.location.href}>
<ClipboardButton copy={this.getCurrentUrl}>
Copy link
</ClipboardButton>
<Button>Copy markdown</Button>
<LinkButton href="#" target="_blank" rel="noopener">
<ClipboardButton copy={() => this.getMarkdown(formatted, reformatted)}>
Copy markdown
</ClipboardButton>
<LinkButton
href={getReportLink(this.getMarkdown(formatted, reformatted, true))}
target="_blank"
rel="noopener"
>
Report issue
</LinkButton>
</div>
@ -180,6 +214,37 @@ class Playground extends React.Component {
}
}
function getReportLink(reportBody) {
return `https://github.com/prettier/prettier/issues/new?body=${encodeURIComponent(
reportBody
)}`;
}
function getCliOptions(availableOptions, options) {
const cliOptions = [];
for (let i = 0; i < availableOptions.length; i++) {
const option = availableOptions[i];
let value = options[option.name];
if (option.type === "boolean") {
if ((value && !option.inverted) || (!value && option.inverted)) {
cliOptions.push([option.cliName, true]);
}
} else if (value !== option.default) {
cliOptions.push([option.cliName, value]);
}
}
return cliOptions;
}
function getSecondFormat(formatted, reformatted) {
return formatted === ""
? ""
: formatted === reformatted
? "✓ Second format is unchanged."
: reformatted;
}
function getDefaultOptions(availableOptions) {
return availableOptions.reduce((acc, option) => {
acc[option.name] = option.default;

23
website/playground/PrettierFormat.js
View File

@ -11,21 +11,36 @@ export default class extends React.Component {
}
componentDidUpdate(prevProps) {
const { code, options, debugAst, debugDoc } = this.props;
const { code, options, debugAst, debugDoc, secondFormat } = this.props;
if (
prevProps.code !== code ||
prevProps.options !== options ||
prevProps.debugAst !== debugAst ||
prevProps.debugDoc !== debugDoc
prevProps.debugDoc !== debugDoc ||
prevProps.secondFormat !== secondFormat
) {
this.format();
}
}
format() {
const { code, options, worker, debugAst, debugDoc } = this.props;
const {
code,
options,
worker,
debugAst,
debugDoc,
secondFormat
} = this.props;
worker
.postMessage({ type: "format", code, options, debugAst, debugDoc })
.postMessage({
type: "format",
code,
options,
debugAst,
debugDoc,
secondFormat
})
.then(result => this.setState(result));
}

5
website/playground/buttons.js
View File

@ -19,7 +19,10 @@ export class ClipboardButton extends React.Component {
componentDidMount() {
this.clipboard = new ClipboardJS(this.ref.current, {
text: () => this.props.clipboardValue
text: () => {
const { copy } = this.props;
return typeof copy === "function" ? copy() : copy;
}
});
this.clipboard.on("success", () => this.showTooltip("Copied!"));
this.clipboard.on("error", () => this.showTooltip("Press ctrl+c to copy"));

7
website/static/worker.js
View File

@ -91,7 +91,8 @@ self.onmessage = function(event) {
const response = {
formatted: formatCode(message.code, options),
debugAst: null,
debugDoc: null
debugDoc: null,
reformatted: null
};
if (message.debugAst) {
@ -127,6 +128,10 @@ self.onmessage = function(event) {
}
}
if (message.secondFormat) {
response.reformatted = formatCode(response.formatted, options)
}
self.postMessage({
uid: uid,
message: response