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

simplify some stuff

master
Lucas Duailibe 2018-04-17 16:42:03 -03:00
parent 2172ed95bf
commit 0ca6ff691e
3 changed files with 197 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
website/playground/Playground.js
View File

@ -4,7 +4,6 @@ import { Button, ClipboardButton, LinkButton } from "./buttons";
import EditorState from "./EditorState"; import EditorState from "./EditorState";
import { DebugPanel, InputPanel, OutputPanel } from "./panels"; import { DebugPanel, InputPanel, OutputPanel } from "./panels";
import PrettierFormat from "./PrettierFormat"; import PrettierFormat from "./PrettierFormat";
import VersionLink from "./VersionLink";
import { shallowEqual } from "./helpers"; import { shallowEqual } from "./helpers";
import * as urlHash from "./urlHash"; import * as urlHash from "./urlHash";
import formatMarkdown from "./markdown"; import formatMarkdown from "./markdown";
@ -16,62 +15,24 @@ import { Checkbox } from "./sidebar/inputs";
const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"]; const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
const ENABLED_OPTIONS = [
"parser",
"printWidth",
"tabWidth",
"useTabs",
{ name: "semi", inverted: true },
"singleQuote",
{ name: "bracketSpacing", inverted: true },
"jsxBracketSameLine",
"arrowParens",
"trailingComma",
"proseWrap",
"insertPragma",
"requirePragma"
].map(option => (typeof option === "string" ? { name: option } : option));
class Playground extends React.Component { class Playground extends React.Component {
constructor() { constructor(props) {
super(); super();
this.state = Object.assign( const { content, options } = urlHash.read();
{
content: "", const defaultOptions = getDefaultOptions(props.availableOptions);
loaded: false,
options: null this.state = {
}, content: content || "",
urlHash.read() options: Object.assign(defaultOptions, options)
); };
this.handleOptionValueChange = this.handleOptionValueChange.bind(this); this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
this.setContent = content => this.setState({ content }); this.setContent = content => this.setState({ content });
this.clearContent = this.setContent.bind(this, ""); this.clearContent = this.setContent.bind(this, "");
this.resetOptions = () => this.resetOptions = () => this.setState({ options: defaultOptions });
this.setState(state => ({
options: getDefaultOptions(state.availableOptions)
}));
this.getCurrentUrl = () => window.location.href;
}
componentDidMount() {
this.props.worker
.postMessage({ type: "meta" })
.then(({ supportInfo, version }) => {
const availableOptions = parsePrettierOptions(supportInfo);
const options = Object.assign(
getDefaultOptions(availableOptions),
this.state.options
);
this.setState({
loaded: true,
availableOptions,
options,
version: fixPrettierVersion(version)
});
});
} }
componentDidUpdate(_, prevState) { componentDidUpdate(_, prevState) {
@ -91,7 +52,9 @@ class Playground extends React.Component {
} }
getMarkdown(formatted, reformatted, full) { getMarkdown(formatted, reformatted, full) {
const { availableOptions, content, options, version } = this.state; const { content, options } = this.state;
const { availableOptions, version } = this.props;
return formatMarkdown( return formatMarkdown(
content, content,
formatted, formatted,
@ -105,116 +68,112 @@ class Playground extends React.Component {
} }
render() { render() {
const { availableOptions, content, loaded, options } = this.state; const { availableOptions } = this.props;
const { content, options } = this.state;
if (!loaded) return "Loading...";
return ( return (
<React.Fragment> <EditorState>
<VersionLink version={this.state.version} /> {editorState => (
<EditorState> <PrettierFormat
{editorState => ( worker={this.props.worker}
<PrettierFormat code={content}
worker={this.props.worker} options={options}
code={content} debugAst={editorState.showAst}
options={options} debugDoc={editorState.showDoc}
debugAst={editorState.showAst} secondFormat={editorState.showSecondFormat}
debugDoc={editorState.showDoc} >
secondFormat={editorState.showSecondFormat} {({ formatted, debugAst, debugDoc, reformatted }) => (
> <React.Fragment>
{({ formatted, debugAst, debugDoc, reformatted }) => ( <div className="editors-container">
<React.Fragment> <Sidebar visible={editorState.showSidebar}>
<div className="editors-container"> <SidebarOptions
<Sidebar visible={editorState.showSidebar}> categories={CATEGORIES_ORDER}
<SidebarOptions availableOptions={availableOptions}
categories={CATEGORIES_ORDER} optionValues={options}
availableOptions={availableOptions} onOptionValueChange={this.handleOptionValueChange}
optionValues={options} />
onOptionValueChange={this.handleOptionValueChange} <SidebarCategory title="Debug">
<Checkbox
label="show AST"
checked={editorState.showAst}
onChange={editorState.toggleAst}
/> />
<SidebarCategory title="Debug"> <Checkbox
<Checkbox label="show doc"
label="show AST" checked={editorState.showDoc}
checked={editorState.showAst} onChange={editorState.toggleDoc}
onChange={editorState.toggleAst}
/>
<Checkbox
label="show doc"
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}>
Reset to defaults
</Button>
</div>
</Sidebar>
<div className="editors">
<InputPanel
mode={getCodemirrorMode(options.parser)}
rulerColumn={options.printWidth}
value={content}
onChange={this.setContent}
/> />
{editorState.showAst ? ( <Checkbox
<DebugPanel value={debugAst || ""} /> label="show second format"
) : null} checked={editorState.showSecondFormat}
{editorState.showDoc ? ( onChange={editorState.toggleSecondFormat}
<DebugPanel value={debugDoc || ""} /> />
) : null} </SidebarCategory>
<div className="sub-options">
<Button onClick={this.resetOptions}>
Reset to defaults
</Button>
</div>
</Sidebar>
<div className="editors">
<InputPanel
mode={getCodemirrorMode(options.parser)}
rulerColumn={options.printWidth}
value={content}
onChange={this.setContent}
/>
{editorState.showAst ? (
<DebugPanel value={debugAst || ""} />
) : null}
{editorState.showDoc ? (
<DebugPanel value={debugDoc || ""} />
) : null}
<OutputPanel
mode={getCodemirrorMode(options.parser)}
value={formatted}
rulerColumn={options.printWidth}
/>
{editorState.showSecondFormat ? (
<OutputPanel <OutputPanel
mode={getCodemirrorMode(options.parser)} mode={getCodemirrorMode(options.parser)}
value={formatted} value={getSecondFormat(formatted, reformatted)}
rulerColumn={options.printWidth} rulerColumn={options.printWidth}
/> />
{editorState.showSecondFormat ? ( ) : null}
<OutputPanel
mode={getCodemirrorMode(options.parser)}
value={getSecondFormat(formatted, reformatted)}
rulerColumn={options.printWidth}
/>
) : null}
</div>
</div> </div>
<div className="bottom-bar"> </div>
<div className="bottom-bar-buttons"> <div className="bottom-bar">
<Button onClick={editorState.toggleSidebar}> <div className="bottom-bar-buttons">
{editorState.showSidebar ? "Hide" : "Show"} options <Button onClick={editorState.toggleSidebar}>
</Button> {editorState.showSidebar ? "Hide" : "Show"} options
<Button onClick={this.clearContent}>Clear</Button> </Button>
</div> <Button onClick={this.clearContent}>Clear</Button>
<div className="bottom-bar-buttons bottom-bar-buttons-right">
<ClipboardButton copy={this.getCurrentUrl}>
Copy link
</ClipboardButton>
<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>
</div> </div>
</React.Fragment> <div className="bottom-bar-buttons bottom-bar-buttons-right">
)} <ClipboardButton copy={() => window.location.href}>
</PrettierFormat> Copy link
)} </ClipboardButton>
</EditorState> <ClipboardButton
</React.Fragment> copy={() => this.getMarkdown(formatted, reformatted)}
>
Copy markdown
</ClipboardButton>
<LinkButton
href={getReportLink(
this.getMarkdown(formatted, reformatted, true)
)}
target="_blank"
rel="noopener"
>
Report issue
</LinkButton>
</div>
</div>
</React.Fragment>
)}
</PrettierFormat>
)}
</EditorState>
); );
} }
} }
@ -250,14 +209,6 @@ function getSecondFormat(formatted, reformatted) {
: reformatted; : reformatted;
} }
function fixPrettierVersion(version) {
const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/);
if (match) {
return `pr-${match[1]}`;
}
return version;
}
function getDefaultOptions(availableOptions) { function getDefaultOptions(availableOptions) {
return availableOptions.reduce((acc, option) => { return availableOptions.reduce((acc, option) => {
acc[option.name] = option.default; acc[option.name] = option.default;
@ -280,28 +231,4 @@ function getCodemirrorMode(parser) {
} }
} }
function parsePrettierOptions(supportInfo) {
const supportedOptions = supportInfo.options.reduce((acc, option) => {
acc[option.name] = option;
return acc;
}, {});
return ENABLED_OPTIONS.reduce((optionsList, optionConfig) => {
if (!supportedOptions[optionConfig.name]) return optionsList;
const option = Object.assign(
{},
optionConfig,
supportedOptions[optionConfig.name]
);
option.cliName =
"--" +
(option.inverted ? "no-" : "") +
option.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
optionsList.push(option);
return optionsList;
}, []);
}
export default Playground; export default Playground;

91
website/playground/index.js
View File

@ -4,9 +4,92 @@ import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import Playground from "./Playground"; import Playground from "./Playground";
import VersionLink from "./VersionLink";
import WorkerApi from "./WorkerApi"; import WorkerApi from "./WorkerApi";
ReactDOM.render( const ENABLED_OPTIONS = [
<Playground worker={new WorkerApi("/worker.js")} />, "parser",
document.getElementById("root") "printWidth",
); "tabWidth",
"useTabs",
{ name: "semi", inverted: true },
"singleQuote",
{ name: "bracketSpacing", inverted: true },
"jsxBracketSameLine",
"arrowParens",
"trailingComma",
"proseWrap",
"insertPragma",
"requirePragma"
].map(option => (typeof option === "string" ? { name: option } : option));
class App extends React.Component {
constructor() {
super();
this.state = { loaded: false };
this.worker = new WorkerApi("/worker.js");
}
componentDidMount() {
this.worker
.postMessage({ type: "meta" })
.then(({ supportInfo, version }) => {
this.setState({
loaded: true,
availableOptions: parsePrettierOptions(supportInfo),
version: fixPrettierVersion(version)
});
});
}
render() {
const { loaded, availableOptions, version } = this.state;
if (!loaded) return "Loading...";
return (
<React.Fragment>
<VersionLink version={version} />
<Playground
worker={this.worker}
availableOptions={availableOptions}
version={version}
/>
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
function parsePrettierOptions(supportInfo) {
const supportedOptions = supportInfo.options.reduce((acc, option) => {
acc[option.name] = option;
return acc;
}, {});
return ENABLED_OPTIONS.reduce((optionsList, optionConfig) => {
if (!supportedOptions[optionConfig.name]) return optionsList;
const option = Object.assign(
{},
optionConfig,
supportedOptions[optionConfig.name]
);
option.cliName =
"--" +
(option.inverted ? "no-" : "") +
option.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
optionsList.push(option);
return optionsList;
}, []);
}
function fixPrettierVersion(version) {
const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/);
if (match) {
return `pr-${match[1]}`;
}
return version;
}

1
website/static/separate-css/playground.css
View File

@ -15,7 +15,6 @@ body {
margin: 0; margin: 0;
} }
#root,
.playground-container { .playground-container {
height: 100%; height: 100%;
display: flex; display: flex;