included doc debug
parent
9e1a0d2e72
commit
871ae13bb6
|
@ -52,7 +52,11 @@ class Playground extends React.Component {
|
|||
this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
|
||||
|
||||
this.setContent = content => this.setState({ content });
|
||||
this.clearContent = () => this.setState({ content: "" });
|
||||
this.clearContent = this.setContent.bind(this, "");
|
||||
this.resetOptions = () =>
|
||||
this.setState(state => ({
|
||||
options: getDefaultOptions(state.availableOptions)
|
||||
}));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -62,12 +66,10 @@ class Playground extends React.Component {
|
|||
.postMessage({ type: "meta" })
|
||||
.then(({ supportInfo, version }) => {
|
||||
const availableOptions = parsePrettierOptions(supportInfo);
|
||||
const options =
|
||||
this.state.options ||
|
||||
availableOptions.reduce((acc, option) => {
|
||||
acc[option.name] = option.default;
|
||||
return acc;
|
||||
}, {});
|
||||
const options = Object.assign(
|
||||
getDefaultOptions(availableOptions),
|
||||
this.state.options
|
||||
);
|
||||
|
||||
this.setState({ loaded: true, availableOptions, options, version });
|
||||
});
|
||||
|
@ -107,15 +109,24 @@ class Playground extends React.Component {
|
|||
checked={editorState.showAst}
|
||||
onChange={editorState.toggleAst}
|
||||
/>
|
||||
<Checkbox
|
||||
label="show doc"
|
||||
checked={editorState.showDoc}
|
||||
onChange={editorState.toggleDoc}
|
||||
/>
|
||||
</SidebarCategory>
|
||||
<div className="sub-options">
|
||||
<Button onClick={this.resetOptions}>Reset to defaults</Button>
|
||||
</div>
|
||||
</Sidebar>
|
||||
<PrettierFormat
|
||||
worker={this._worker}
|
||||
code={content}
|
||||
options={options}
|
||||
ast={editorState.showAst}
|
||||
debugAst={editorState.showAst}
|
||||
debugDoc={editorState.showDoc}
|
||||
>
|
||||
{({ ast: codeAst, formatted }) => (
|
||||
{({ formatted, debugAst, debugDoc }) => (
|
||||
<div className="editors">
|
||||
<InputPanel
|
||||
mode={getCodemirrorMode(options.parser)}
|
||||
|
@ -124,10 +135,10 @@ class Playground extends React.Component {
|
|||
onChange={this.setContent}
|
||||
/>
|
||||
{editorState.showAst ? (
|
||||
<DebugPanel value={codeAst} />
|
||||
<DebugPanel value={debugAst} />
|
||||
) : null}
|
||||
{editorState.showDoc ? (
|
||||
<DebugPanel value={"doc here"} />
|
||||
<DebugPanel value={debugDoc} />
|
||||
) : null}
|
||||
<OutputPanel
|
||||
mode={getCodemirrorMode(options.parser)}
|
||||
|
@ -158,6 +169,13 @@ class Playground extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function getDefaultOptions(availableOptions) {
|
||||
return availableOptions.reduce((acc, option) => {
|
||||
acc[option.name] = option.default;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function getCodemirrorMode(parser) {
|
||||
switch (parser) {
|
||||
case "css":
|
||||
|
|
|
@ -11,20 +11,21 @@ export default class extends React.Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { code, options, ast } = this.props;
|
||||
const { code, options, debugAst, debugDoc } = this.props;
|
||||
if (
|
||||
prevProps.code !== code ||
|
||||
prevProps.options !== options ||
|
||||
prevProps.ast !== ast
|
||||
prevProps.debugAst !== debugAst ||
|
||||
prevProps.debugDoc !== debugDoc
|
||||
) {
|
||||
this.format();
|
||||
}
|
||||
}
|
||||
|
||||
format() {
|
||||
const { code, options, worker, ast } = this.props;
|
||||
const { code, options, worker, debugAst, debugDoc } = this.props;
|
||||
worker
|
||||
.postMessage({ type: "format", code, options, ast })
|
||||
.postMessage({ type: "format", code, options, debugAst, debugDoc })
|
||||
.then(result => this.setState(result));
|
||||
}
|
||||
|
||||
|
|
|
@ -90,16 +90,17 @@ self.onmessage = function(event) {
|
|||
|
||||
const response = {
|
||||
formatted: formatCode(message.code, options),
|
||||
ast: null,
|
||||
doc: null
|
||||
debugAst: null,
|
||||
debugDoc: null
|
||||
};
|
||||
|
||||
if (message.ast) {
|
||||
var actualAst;
|
||||
if (message.debugAst) {
|
||||
var ast;
|
||||
var errored = false;
|
||||
try {
|
||||
actualAst = prettier.__debug.parse(message.code, options).ast;
|
||||
ast = JSON.stringify(actualAst);
|
||||
ast = JSON.stringify(
|
||||
prettier.__debug.parse(message.code, options).ast
|
||||
);
|
||||
} catch (e) {
|
||||
errored = true;
|
||||
ast = String(e);
|
||||
|
@ -112,7 +113,18 @@ self.onmessage = function(event) {
|
|||
ast = JSON.stringify(actualAst, null, 2);
|
||||
}
|
||||
}
|
||||
response.ast = ast;
|
||||
response.debugAst = ast;
|
||||
}
|
||||
|
||||
if (message.debugDoc) {
|
||||
try {
|
||||
response.debugDoc = prettier.__debug.formatDoc(
|
||||
prettier.__debug.printToDoc(message.code, options),
|
||||
{ parser: "babylon" }
|
||||
);
|
||||
} catch (e) {
|
||||
response.debugDoc = String(e);
|
||||
}
|
||||
}
|
||||
|
||||
self.postMessage({
|
||||
|
|
Loading…
Reference in New Issue