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

refactor panels.js

master
Lucas Duailibe 2018-04-19 14:46:29 -03:00
parent 961d25560f
commit 9ca95011c0
8 changed files with 99 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
website/playground/Playground.js
View File

@ -47,9 +47,11 @@ class Playground extends React.Component {
}
handleOptionValueChange(option, value) {
this.setState(state => ({
options: Object.assign({}, state.options, { [option.name]: value })
}));
this.setState(state => {
let options = Object.assign({}, state.options);
options[option.name] = value;
return { options };
});
}
getMarkdown(formatted, reformatted, full) {
@ -83,7 +85,7 @@ class Playground extends React.Component {
debugDoc={editorState.showDoc}
secondFormat={editorState.showSecondFormat}
>
{({ formatted, debugAst, debugDoc, reformatted }) => (
{({ formatted, debug }) => (
<React.Fragment>
<div className="editors-container">
<Sidebar visible={editorState.showSidebar}>
@ -125,10 +127,10 @@ class Playground extends React.Component {
onChange={this.setContent}
/>
{editorState.showAst ? (
<DebugPanel value={debugAst || ""} />
<DebugPanel value={debug.ast || ""} />
) : null}
{editorState.showDoc ? (
<DebugPanel value={debugDoc || ""} />
<DebugPanel value={debug.doc || ""} />
) : null}
<OutputPanel
mode={util.getCodemirrorMode(options.parser)}
@ -138,7 +140,7 @@ class Playground extends React.Component {
{editorState.showSecondFormat ? (
<OutputPanel
mode={util.getCodemirrorMode(options.parser)}
value={getSecondFormat(formatted, reformatted)}
value={getSecondFormat(formatted, debug.reformatted)}
rulerColumn={options.printWidth}
/>
) : null}
@ -156,13 +158,15 @@ class Playground extends React.Component {
Copy link
</ClipboardButton>
<ClipboardButton
copy={() => this.getMarkdown(formatted, reformatted)}
copy={() =>
this.getMarkdown(formatted, debug.reformatted)
}
>
Copy markdown
</ClipboardButton>
<LinkButton
href={getReportLink(
this.getMarkdown(formatted, reformatted, true)
this.getMarkdown(formatted, debug.reformatted, true)
)}
target="_blank"
rel="noopener"

33
website/playground/PrettierFormat.js
View File

@ -2,15 +2,10 @@ import React from "react";
import { shallowEqual } from "./helpers";
function getFormatProps(props) {
const { code, options, debugAst, debugDoc, secondFormat } = props;
return { code, options, debugAst, debugDoc, secondFormat };
}
export default class PrettierFormat extends React.Component {
constructor() {
super();
this.state = { formatted: "" };
this.state = { formatted: "", debug: {} };
}
componentDidMount() {
@ -18,18 +13,32 @@ export default class PrettierFormat extends React.Component {
}
componentDidUpdate(prevProps) {
if (!shallowEqual(getFormatProps(prevProps), getFormatProps(this.props))) {
this.format();
for (const key of [
"code",
"options",
"debugAst",
"debugDoc",
"secondFormat"
]) {
if (prevProps[key] !== this.props[key]) {
this.format();
break;
}
}
}
format() {
const { worker } = this.props;
const {
worker,
code,
options,
debugAst: ast,
debugDoc: doc,
secondFormat: reformat
} = this.props;
worker
.postMessage(
Object.assign({ type: "format" }, getFormatProps(this.props))
)
.format(code, options, { ast, doc, reformat })
.then(result => this.setState(result));
}

22
website/playground/WorkerApi.js
View File

@ -20,13 +20,21 @@ export default function(source) {
}
});
function postMessage(message) {
const uid = ++counter;
return new Promise((resolve, reject) => {
handlers[uid] = [resolve, reject];
worker.postMessage({ uid, message });
});
}
return {
postMessage(message) {
const uid = ++counter;
return new Promise((resolve, reject) => {
handlers[uid] = [resolve, reject];
worker.postMessage({ uid, message });
});
}
getMetadata() {
return postMessage({ type: "meta" });
},
format(code, options, debug) {
return postMessage({ type: "format", code, options, debug });
},
postMessage
};
}

2
website/playground/buttons.js
View File

@ -43,7 +43,7 @@ export class ClipboardButton extends React.Component {
render() {
const rest = Object.assign({}, this.props);
delete rest.children;
delete rest.clipboardValue;
delete rest.copy;
return (
<Button ref={this.ref} {...rest}>

14
website/playground/index.js
View File

@ -32,15 +32,13 @@ class App extends React.Component {
}
componentDidMount() {
this.worker
.postMessage({ type: "meta" })
.then(({ supportInfo, version }) => {
this.setState({
loaded: true,
availableOptions: getAvailableOptions(supportInfo, ENABLED_OPTIONS),
version: fixPrettierVersion(version)
});
this.worker.getMetadata().then(({ supportInfo, version }) => {
this.setState({
loaded: true,
availableOptions: getAvailableOptions(supportInfo, ENABLED_OPTIONS),
version: fixPrettierVersion(version)
});
});
}
render() {

75
website/playground/panels.js
View File

@ -11,23 +11,21 @@ class CodeMirrorPanel extends React.Component {
}
componentDidMount() {
const {
mode,
rulerColumn: column,
rulerColor: color,
placeholder,
value
} = this.props;
const options = Object.assign({}, this.props);
delete options.rulerColumn;
delete options.rulerColor;
delete options.value;
delete options.onChange;
options.rulers = [makeRuler(this.props)];
this._codeMirror = CodeMirror.fromTextArea(
this._textareaRef.current,
Object.assign(
{ mode, rulers: [{ column, color }], placeholder },
this.props.options
)
options
);
this._codeMirror.on("change", this.handleChange);
this.updateValue(value || "");
this.updateValue(this.props.value || "");
}
componentWillUnmount() {
@ -35,7 +33,7 @@ class CodeMirrorPanel extends React.Component {
}
componentDidUpdate(prevProps) {
if (this.props.options.readOnly && this.props.value !== this._cached) {
if (this.props.readOnly && this.props.value !== this._cached) {
this.updateValue(this.props.value);
}
if (this.props.mode !== prevProps.mode) {
@ -45,8 +43,7 @@ class CodeMirrorPanel extends React.Component {
this._codeMirror.setOption("placeholder", this.props.placeholder);
}
if (this.props.rulerColumn !== prevProps.rulerColumn) {
const { rulerColumn: column, rulerColor: color } = this.props;
this._codeMirror.setOption("rulers", [{ column, color }]);
this._codeMirror.setOption("rulers", [makeRuler(this.props)]);
}
}
@ -71,44 +68,32 @@ class CodeMirrorPanel extends React.Component {
}
}
export function InputPanel({
mode,
rulerColumn,
value,
placeholder,
onChange
}) {
function makeRuler(props) {
return { column: props.rulerColumn, color: props.rulerColor };
}
export function InputPanel(props) {
return (
<CodeMirrorPanel
options={{
lineNumbers: true,
keyMap: "sublime",
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
tabWidth: 2
}}
mode={mode}
rulerColumn={rulerColumn}
lineNumbers={true}
keyMap="sublime"
autoCloseBrackets={true}
matchBrackets={true}
showCursorWhenSelecting={true}
tabWidth={2}
rulerColor="#eeeeee"
value={value}
placeholder={placeholder}
onChange={onChange}
{...props}
/>
);
}
export function OutputPanel({ mode, rulerColumn, value }) {
export function OutputPanel(props) {
return (
<CodeMirrorPanel
options={{
readOnly: true,
lineNumbers: true
}}
mode={mode}
rulerColumn={rulerColumn}
readOnly={true}
lineNumbers={true}
rulerColor="#444444"
value={value}
{...props}
/>
);
}
@ -116,7 +101,9 @@ export function OutputPanel({ mode, rulerColumn, value }) {
export function DebugPanel({ value }) {
return (
<CodeMirrorPanel
options={{ readOnly: true, lineNumbers: false, mode: "jsx" }}
readOnly={true}
lineNumbers={false}
mode="jsx"
value={value}
/>
);

3
website/playground/util.js
View File

@ -41,8 +41,7 @@ export function getDefaults(availableOptions) {
export function buildCliArgs(availableOptions, options) {
const args = [];
for (let i = 0; i < availableOptions.length; i++) {
const option = availableOptions[i];
for (const option of availableOptions) {
const value = options[option.name];
if (option.type === "boolean") {

20
website/static/worker.js
View File

@ -93,12 +93,14 @@ function handleMessage(message) {
var response = {
formatted: formatCode(message.code, options),
debugAst: null,
debugDoc: null,
reformatted: null
debug: {
ast: null,
doc: null,
reformatted: null
}
};
if (message.debugAst) {
if (message.debug.ast) {
var ast;
var errored = false;
try {
@ -115,22 +117,22 @@ function handleMessage(message) {
ast = JSON.stringify(ast, null, 2);
}
}
response.debugAst = ast;
response.debug.ast = ast;
}
if (message.debugDoc) {
if (message.debug.doc) {
try {
response.debugDoc = prettier.__debug.formatDoc(
prettier.__debug.printToDoc(message.code, options),
{ parser: "babylon" }
);
} catch (e) {
response.debugDoc = String(e);
response.debug.doc = String(e);
}
}
if (message.secondFormat) {
response.reformatted = formatCode(response.formatted, options);
if (message.debug.reformat) {
response.debug.reformatted = formatCode(response.formatted, options);
}
return response;