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

range support

master
Lucas Duailibe 2018-04-20 11:13:09 -03:00
parent 57cdf314d5
commit 1f320a6031
8 changed files with 99 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -6,5 +6,6 @@
/dist/
**/node_modules/**
/website/build/
/website/static/playground.js
/website/static/lib/
/tests_integration/cli/

56
website/playground/Playground.js
View File

@ -12,9 +12,25 @@ import getCodeSample from "./codeSamples";
import { Sidebar, SidebarCategory } from "./sidebar/components";
import SidebarOptions from "./sidebar/SidebarOptions";
import Option from "./sidebar/options";
import { Checkbox } from "./sidebar/inputs";
const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
const ENABLED_OPTIONS = [
"parser",
"printWidth",
"tabWidth",
"useTabs",
"semi",
"singleQuote",
"bracketSpacing",
"jsxBracketSameLine",
"arrowParens",
"trailingComma",
"proseWrap",
"insertPragma",
"requirePragma"
];
class Playground extends React.Component {
constructor(props) {
@ -22,7 +38,10 @@ class Playground extends React.Component {
const { content, options } = urlHash.read();
const defaultOptions = util.getDefaults(props.availableOptions);
const defaultOptions = util.getDefaults(
props.availableOptions,
ENABLED_OPTIONS
);
this.state = {
content: content || "",
@ -34,6 +53,13 @@ class Playground extends React.Component {
this.setContent = content => this.setState({ content });
this.clearContent = this.setContent.bind(this, "");
this.resetOptions = () => this.setState({ options: defaultOptions });
this.rangeStartOption = props.availableOptions.find(
opt => opt.name === "rangeStart"
);
this.rangeEndOption = props.availableOptions.find(
opt => opt.name === "rangeEnd"
);
}
componentDidUpdate(_, prevState) {
@ -48,8 +74,12 @@ class Playground extends React.Component {
handleOptionValueChange(option, value) {
this.setState(state => {
let options = Object.assign({}, state.options);
options[option.name] = value;
const options = Object.assign({}, state.options);
if (option.type === "int" && isNaN(value)) {
delete options[option.name];
} else {
options[option.name] = value;
}
return { options };
});
}
@ -92,9 +122,27 @@ class Playground extends React.Component {
<SidebarOptions
categories={CATEGORIES_ORDER}
availableOptions={availableOptions}
enabledOptions={ENABLED_OPTIONS}
optionValues={options}
onOptionValueChange={this.handleOptionValueChange}
/>
<SidebarCategory title="Range">
<label>
The selected range will be highlighted in yellow in the
input editor
</label>
<Option
option={this.rangeStartOption}
value={options.rangeStart}
onChange={this.handleOptionValueChange}
/>
<Option
option={this.rangeEndOption}
value={options.rangeEnd}
overrideMax={content.length}
onChange={this.handleOptionValueChange}
/>
</SidebarCategory>
<SidebarCategory title="Debug">
<Checkbox
label="show AST"
@ -124,6 +172,8 @@ class Playground extends React.Component {
ruler={options.printWidth}
value={content}
placeholder={getCodeSample(options.parser)}
overlayStart={options.rangeStart}
overlayEnd={options.rangeEnd}
onChange={this.setContent}
/>
{editorState.showAst ? (

10
website/playground/PrettierFormat.js
View File

@ -1,7 +1,5 @@
import React from "react";
import { shallowEqual } from "./helpers";
export default class PrettierFormat extends React.Component {
constructor() {
super();
@ -13,13 +11,7 @@ export default class PrettierFormat extends React.Component {
}
componentDidUpdate(prevProps) {
for (const key of [
"code",
"options",
"debugAst",
"debugDoc",
"reformat"
]) {
for (const key of ["code", "options", "debugAst", "debugDoc", "reformat"]) {
if (prevProps[key] !== this.props[key]) {
this.format();
break;

33
website/playground/index.js
View File

@ -6,23 +6,7 @@ import ReactDOM from "react-dom";
import Playground from "./Playground";
import VersionLink from "./VersionLink";
import WorkerApi from "./WorkerApi";
import { getAvailableOptions, fixPrettierVersion } from "./util";
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));
import { fixPrettierVersion } from "./util";
class App extends React.Component {
constructor() {
@ -35,7 +19,7 @@ class App extends React.Component {
this.worker.getMetadata().then(({ supportInfo, version }) => {
this.setState({
loaded: true,
availableOptions: getAvailableOptions(supportInfo, ENABLED_OPTIONS),
availableOptions: supportInfo.options.map(augmentOption),
version: fixPrettierVersion(version)
});
});
@ -61,4 +45,17 @@ class App extends React.Component {
}
}
function augmentOption(option) {
option.cliName =
"--" +
(option.inverted ? "no-" : "") +
option.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
if (option.type === "boolean" && option.default === true) {
option.inverted = true;
}
return option;
}
ReactDOM.render(<App />, document.getElementById("root"));

41
website/playground/panels.js
View File

@ -37,11 +37,10 @@ class CodeMirrorPanel extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.readOnly && this.props.value !== this._cached) {
this.updateValue(this.props.value);
this.updateOverlay();
}
if (
this.props.overlayStart !== prevProps.overlayStart ||
this.props.overlayEnd !== this.props.overlayEnd
this.props.overlayEnd !== prevProps.overlayEnd
) {
this.updateOverlay();
}
@ -79,6 +78,7 @@ class CodeMirrorPanel extends React.Component {
if (change.origin !== "setValue") {
this._cached = doc.getValue();
this.props.onChange(this._cached);
this.updateOverlay();
}
}
@ -92,7 +92,7 @@ class CodeMirrorPanel extends React.Component {
}
function getIndexPosition(text, indexes) {
indexes = indexes.slice().sort();
indexes = indexes.slice();
let line = 0;
let count = 0;
let lineStart = 0;
@ -102,11 +102,11 @@ function getIndexPosition(text, indexes) {
const index = indexes.shift();
while (count < index && count < text.length) {
count++;
if (text[count] === "\n") {
line++;
lineStart = count;
}
count++;
}
result.push({ line, pos: count - lineStart });
@ -128,9 +128,8 @@ function createOverlay(start, end) {
if (stream.pos < end.pos) {
stream.pos = end.pos;
return "searching";
} else {
stream.skipToEnd();
}
stream.skipToEnd();
} else {
stream.skipToEnd();
return "searching";
@ -153,8 +152,6 @@ export function InputPanel(props) {
showCursorWhenSelecting={true}
tabWidth={2}
rulerColor="#eeeeee"
rangeStart={5}
rangeEnd={25}
{...props}
/>
);
@ -181,31 +178,3 @@ export function DebugPanel({ value }) {
/>
);
}
function stringify(obj, replacer, spaces, cycleReplacer) {
return JSON.stringify(obj, serializer(replacer, cycleReplacer), spaces);
}
function serializer(replacer, cycleReplacer) {
var stack = [],
keys = [];
if (cycleReplacer == null)
cycleReplacer = function(key, value) {
if (stack[0] === value) return "[Circular ~]";
return (
"[Circular ~." + keys.slice(0, stack.indexOf(value)).join(".") + "]"
);
};
return function(key, value) {
if (stack.length > 0) {
var thisPos = stack.indexOf(this);
~thisPos ? stack.splice(thisPos + 1) : stack.push(this);
~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key);
if (~stack.indexOf(value)) value = cycleReplacer.call(this, key, value);
} else stack.push(value);
return replacer == null ? value : replacer.call(this, key, value);
};
}

20
website/playground/sidebar/SidebarOptions.js
View File

@ -7,6 +7,7 @@ import Option from "./options";
export default function({
categories,
availableOptions,
enabledOptions,
optionValues,
onOptionValueChange
}) {
@ -15,14 +16,17 @@ export default function({
category =>
options[category] ? (
<SidebarCategory key={category} title={category}>
{options[category].map(option => (
<Option
key={option.name}
option={option}
value={optionValues[option.name]}
onChange={onOptionValueChange}
/>
))}
{options[category].map(
option =>
enabledOptions.includes(option.name) ? (
<Option
key={option.name}
option={option}
value={optionValues[option.name]}
onChange={onOptionValueChange}
/>
) : null
)}
</SidebarCategory>
) : null
);

4
website/playground/urlHash.js
View File

@ -2,7 +2,9 @@ import LZString from "lz-string";
export function read() {
const hash = document.location.hash.slice(1);
if (!hash) return {};
if (!hash) {
return {};
}
// backwards support for old json encoded URIComponent
const decode =

38
website/playground/util.js
View File

@ -1,29 +1,3 @@
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) {
@ -32,9 +6,11 @@ export function fixPrettierVersion(version) {
return version;
}
export function getDefaults(availableOptions) {
export function getDefaults(availableOptions, enabledOptions) {
return availableOptions.reduce((acc, option) => {
acc[option.name] = option.default;
if (enabledOptions.includes(option.name)) {
acc[option.name] = option.default;
}
return acc;
}, {});
}
@ -44,11 +20,15 @@ export function buildCliArgs(availableOptions, options) {
for (const option of availableOptions) {
const value = options[option.name];
if (typeof value === "undefined") {
continue;
}
if (option.type === "boolean") {
if ((value && !option.inverted) || (!value && option.inverted)) {
args.push([option.cliName, true]);
}
} else if (value !== option.default) {
} else if (value !== option.default || option.name === "rangeStart") {
args.push([option.cliName, value]);
}
}