placeholder + refactors
parent
a7a65aceb2
commit
961d25560f
|
@ -7,6 +7,8 @@ import PrettierFormat from "./PrettierFormat";
|
||||||
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";
|
||||||
|
import * as util from "./util";
|
||||||
|
import getCodeSample from "./codeSamples";
|
||||||
|
|
||||||
import { Sidebar, SidebarCategory } from "./sidebar/components";
|
import { Sidebar, SidebarCategory } from "./sidebar/components";
|
||||||
import SidebarOptions from "./sidebar/SidebarOptions";
|
import SidebarOptions from "./sidebar/SidebarOptions";
|
||||||
|
@ -20,7 +22,7 @@ class Playground extends React.Component {
|
||||||
|
|
||||||
const { content, options } = urlHash.read();
|
const { content, options } = urlHash.read();
|
||||||
|
|
||||||
const defaultOptions = getDefaultOptions(props.availableOptions);
|
const defaultOptions = util.getDefaults(props.availableOptions);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
content: content || "",
|
content: content || "",
|
||||||
|
@ -61,7 +63,7 @@ class Playground extends React.Component {
|
||||||
version,
|
version,
|
||||||
window.location.href,
|
window.location.href,
|
||||||
options,
|
options,
|
||||||
getCliOptions(availableOptions, options),
|
util.buildCliArgs(availableOptions, options),
|
||||||
full
|
full
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -75,7 +77,7 @@ class Playground extends React.Component {
|
||||||
{editorState => (
|
{editorState => (
|
||||||
<PrettierFormat
|
<PrettierFormat
|
||||||
worker={worker}
|
worker={worker}
|
||||||
code={content}
|
code={content || getCodeSample(options.parser)}
|
||||||
options={options}
|
options={options}
|
||||||
debugAst={editorState.showAst}
|
debugAst={editorState.showAst}
|
||||||
debugDoc={editorState.showDoc}
|
debugDoc={editorState.showDoc}
|
||||||
|
@ -116,9 +118,10 @@ class Playground extends React.Component {
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
<div className="editors">
|
<div className="editors">
|
||||||
<InputPanel
|
<InputPanel
|
||||||
mode={getCodemirrorMode(options.parser)}
|
mode={util.getCodemirrorMode(options.parser)}
|
||||||
rulerColumn={options.printWidth}
|
rulerColumn={options.printWidth}
|
||||||
value={content}
|
value={content}
|
||||||
|
placeholder={getCodeSample(options.parser)}
|
||||||
onChange={this.setContent}
|
onChange={this.setContent}
|
||||||
/>
|
/>
|
||||||
{editorState.showAst ? (
|
{editorState.showAst ? (
|
||||||
|
@ -128,13 +131,13 @@ class Playground extends React.Component {
|
||||||
<DebugPanel value={debugDoc || ""} />
|
<DebugPanel value={debugDoc || ""} />
|
||||||
) : null}
|
) : null}
|
||||||
<OutputPanel
|
<OutputPanel
|
||||||
mode={getCodemirrorMode(options.parser)}
|
mode={util.getCodemirrorMode(options.parser)}
|
||||||
value={formatted}
|
value={formatted}
|
||||||
rulerColumn={options.printWidth}
|
rulerColumn={options.printWidth}
|
||||||
/>
|
/>
|
||||||
{editorState.showSecondFormat ? (
|
{editorState.showSecondFormat ? (
|
||||||
<OutputPanel
|
<OutputPanel
|
||||||
mode={getCodemirrorMode(options.parser)}
|
mode={util.getCodemirrorMode(options.parser)}
|
||||||
value={getSecondFormat(formatted, reformatted)}
|
value={getSecondFormat(formatted, reformatted)}
|
||||||
rulerColumn={options.printWidth}
|
rulerColumn={options.printWidth}
|
||||||
/>
|
/>
|
||||||
|
@ -183,23 +186,6 @@ function getReportLink(reportBody) {
|
||||||
)}`;
|
)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCliOptions(availableOptions, options) {
|
|
||||||
const cliOptions = [];
|
|
||||||
for (let i = 0; i < availableOptions.length; i++) {
|
|
||||||
const option = availableOptions[i];
|
|
||||||
const 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) {
|
function getSecondFormat(formatted, reformatted) {
|
||||||
return formatted === ""
|
return formatted === ""
|
||||||
? ""
|
? ""
|
||||||
|
@ -208,26 +194,4 @@ function getSecondFormat(formatted, reformatted) {
|
||||||
: reformatted;
|
: reformatted;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDefaultOptions(availableOptions) {
|
|
||||||
return availableOptions.reduce((acc, option) => {
|
|
||||||
acc[option.name] = option.default;
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCodemirrorMode(parser) {
|
|
||||||
switch (parser) {
|
|
||||||
case "css":
|
|
||||||
case "less":
|
|
||||||
case "scss":
|
|
||||||
return "css";
|
|
||||||
case "graphql":
|
|
||||||
return "graphql";
|
|
||||||
case "markdown":
|
|
||||||
return "markdown";
|
|
||||||
default:
|
|
||||||
return "jsx";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Playground;
|
export default Playground;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
export default function getCodeExample(parser) {
|
export default function(parser) {
|
||||||
switch (parser) {
|
switch (parser) {
|
||||||
case "babylon":
|
case "babylon":
|
||||||
return [
|
return [
|
||||||
|
|
|
@ -6,6 +6,7 @@ import ReactDOM from "react-dom";
|
||||||
import Playground from "./Playground";
|
import Playground from "./Playground";
|
||||||
import VersionLink from "./VersionLink";
|
import VersionLink from "./VersionLink";
|
||||||
import WorkerApi from "./WorkerApi";
|
import WorkerApi from "./WorkerApi";
|
||||||
|
import { getAvailableOptions, fixPrettierVersion } from "./util";
|
||||||
|
|
||||||
const ENABLED_OPTIONS = [
|
const ENABLED_OPTIONS = [
|
||||||
"parser",
|
"parser",
|
||||||
|
@ -36,7 +37,7 @@ class App extends React.Component {
|
||||||
.then(({ supportInfo, version }) => {
|
.then(({ supportInfo, version }) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
loaded: true,
|
loaded: true,
|
||||||
availableOptions: parsePrettierOptions(supportInfo),
|
availableOptions: getAvailableOptions(supportInfo, ENABLED_OPTIONS),
|
||||||
version: fixPrettierVersion(version)
|
version: fixPrettierVersion(version)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -63,37 +64,3 @@ class App extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
ReactDOM.render(<App />, document.getElementById("root"));
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -11,10 +11,19 @@ class CodeMirrorPanel extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { mode, rulerColumn: column, rulerColor: color, value } = this.props;
|
const {
|
||||||
|
mode,
|
||||||
|
rulerColumn: column,
|
||||||
|
rulerColor: color,
|
||||||
|
placeholder,
|
||||||
|
value
|
||||||
|
} = this.props;
|
||||||
this._codeMirror = CodeMirror.fromTextArea(
|
this._codeMirror = CodeMirror.fromTextArea(
|
||||||
this._textareaRef.current,
|
this._textareaRef.current,
|
||||||
Object.assign({ mode, rulers: [{ column, color }] }, this.props.options)
|
Object.assign(
|
||||||
|
{ mode, rulers: [{ column, color }], placeholder },
|
||||||
|
this.props.options
|
||||||
|
)
|
||||||
);
|
);
|
||||||
this._codeMirror.on("change", this.handleChange);
|
this._codeMirror.on("change", this.handleChange);
|
||||||
|
|
||||||
|
@ -32,6 +41,9 @@ class CodeMirrorPanel extends React.Component {
|
||||||
if (this.props.mode !== prevProps.mode) {
|
if (this.props.mode !== prevProps.mode) {
|
||||||
this._codeMirror.setOption("mode", this.props.mode);
|
this._codeMirror.setOption("mode", this.props.mode);
|
||||||
}
|
}
|
||||||
|
if (this.props.placeholder !== prevProps.placeholder) {
|
||||||
|
this._codeMirror.setOption("placeholder", this.props.placeholder);
|
||||||
|
}
|
||||||
if (this.props.rulerColumn !== prevProps.rulerColumn) {
|
if (this.props.rulerColumn !== prevProps.rulerColumn) {
|
||||||
const { rulerColumn: column, rulerColor: color } = this.props;
|
const { rulerColumn: column, rulerColor: color } = this.props;
|
||||||
this._codeMirror.setOption("rulers", [{ column, color }]);
|
this._codeMirror.setOption("rulers", [{ column, color }]);
|
||||||
|
@ -59,7 +71,13 @@ class CodeMirrorPanel extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function InputPanel({ mode, rulerColumn, value, onChange }) {
|
export function InputPanel({
|
||||||
|
mode,
|
||||||
|
rulerColumn,
|
||||||
|
value,
|
||||||
|
placeholder,
|
||||||
|
onChange
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<CodeMirrorPanel
|
<CodeMirrorPanel
|
||||||
options={{
|
options={{
|
||||||
|
@ -74,6 +92,7 @@ export function InputPanel({ mode, rulerColumn, value, onChange }) {
|
||||||
rulerColumn={rulerColumn}
|
rulerColumn={rulerColumn}
|
||||||
rulerColor="#eeeeee"
|
rulerColor="#eeeeee"
|
||||||
value={value}
|
value={value}
|
||||||
|
placeholder={placeholder}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,72 @@
|
||||||
|
export function getAvailableOptions(supportInfo, enabledOptions) {
|
||||||
|
const supportedOptions = supportInfo.options.reduce((acc, option) => {
|
||||||
|
acc[option.name] = option;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
return enabledOptions.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 function fixPrettierVersion(version) {
|
||||||
|
const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/);
|
||||||
|
if (match) {
|
||||||
|
return `pr-${match[1]}`;
|
||||||
|
}
|
||||||
|
return version;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDefaults(availableOptions) {
|
||||||
|
return availableOptions.reduce((acc, option) => {
|
||||||
|
acc[option.name] = option.default;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildCliArgs(availableOptions, options) {
|
||||||
|
const args = [];
|
||||||
|
for (let i = 0; i < availableOptions.length; i++) {
|
||||||
|
const option = availableOptions[i];
|
||||||
|
const value = options[option.name];
|
||||||
|
|
||||||
|
if (option.type === "boolean") {
|
||||||
|
if ((value && !option.inverted) || (!value && option.inverted)) {
|
||||||
|
args.push([option.cliName, true]);
|
||||||
|
}
|
||||||
|
} else if (value !== option.default) {
|
||||||
|
args.push([option.cliName, value]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return args;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCodemirrorMode(parser) {
|
||||||
|
switch (parser) {
|
||||||
|
case "css":
|
||||||
|
case "less":
|
||||||
|
case "scss":
|
||||||
|
return "css";
|
||||||
|
case "graphql":
|
||||||
|
return "graphql";
|
||||||
|
case "markdown":
|
||||||
|
return "markdown";
|
||||||
|
default:
|
||||||
|
return "jsx";
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue