show ast
parent
faceecc776
commit
7b3fecf976
|
@ -2,7 +2,9 @@ import React from "react";
|
|||
|
||||
import Button from "./Button";
|
||||
import EditorState from "./EditorState";
|
||||
import { Checkbox } from "./inputs";
|
||||
import { DebugPanel, InputPanel, OutputPanel } from "./panels";
|
||||
import PrettierFormat from "./PrettierFormat";
|
||||
import SidebarOptions from "./SidebarOptions";
|
||||
import WorkerApi from "./WorkerApi";
|
||||
|
||||
|
@ -22,6 +24,23 @@ const ENABLED_OPTIONS = [
|
|||
"requirePragma"
|
||||
].map(option => (typeof option === "string" ? { name: option } : option));
|
||||
|
||||
function Sidebar({ visible, children }) {
|
||||
return (
|
||||
<div className={`options-container ${visible ? "open" : ""}`}>
|
||||
<div className="options">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarCategory({ title, children }) {
|
||||
return (
|
||||
<details className="sub-options" open="true">
|
||||
<summary>{title}</summary>
|
||||
{children}
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
class Playground extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
@ -60,31 +79,10 @@ class Playground extends React.Component {
|
|||
}));
|
||||
}
|
||||
|
||||
componentDidUpdate(_, prevState) {
|
||||
if (
|
||||
prevState.content !== this.state.content ||
|
||||
prevState.options !== this.state.options
|
||||
) {
|
||||
this._format();
|
||||
}
|
||||
}
|
||||
|
||||
_format() {
|
||||
const { content, options } = this.state;
|
||||
this._worker
|
||||
.postMessage({
|
||||
type: "format",
|
||||
code: content,
|
||||
options
|
||||
})
|
||||
.then(({ formatted }) => this.setState({ formatted }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
availableOptions,
|
||||
content,
|
||||
formatted,
|
||||
loaded,
|
||||
options,
|
||||
showSidebar
|
||||
|
@ -97,34 +95,48 @@ class Playground extends React.Component {
|
|||
{editorState => (
|
||||
<div className="playground-container">
|
||||
<div className="editors-container">
|
||||
<div
|
||||
className={`options-container ${
|
||||
editorState.showSidebar ? "open" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="options">
|
||||
<SidebarOptions
|
||||
availableOptions={availableOptions}
|
||||
prettierOptions={options}
|
||||
onOptionValueChange={this.handleOptionValueChange}
|
||||
<Sidebar visible={editorState.showSidebar}>
|
||||
<SidebarOptions
|
||||
availableOptions={availableOptions}
|
||||
prettierOptions={options}
|
||||
onOptionValueChange={this.handleOptionValueChange}
|
||||
/>
|
||||
<SidebarCategory title="Debug">
|
||||
<Checkbox
|
||||
label="show AST"
|
||||
checked={editorState.showAst}
|
||||
onChange={editorState.toggleAst}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="editors">
|
||||
<InputPanel
|
||||
mode={getCodemirrorMode(options.parser)}
|
||||
rulerColumn={options.printWidth}
|
||||
value={content}
|
||||
onChange={this.setContent}
|
||||
/>
|
||||
{editorState.showAst ? <DebugPanel value={"ast here"} /> : null}
|
||||
{editorState.showDoc ? <DebugPanel value={"doc here"} /> : null}
|
||||
<OutputPanel
|
||||
mode={getCodemirrorMode(options.parser)}
|
||||
value={formatted}
|
||||
rulerColumn={options.printWidth}
|
||||
/>
|
||||
</div>
|
||||
</SidebarCategory>
|
||||
</Sidebar>
|
||||
<PrettierFormat
|
||||
worker={this._worker}
|
||||
code={content}
|
||||
options={options}
|
||||
ast={editorState.showAst}
|
||||
>
|
||||
{({ ast: codeAst, formatted }) => (
|
||||
<div className="editors">
|
||||
<InputPanel
|
||||
mode={getCodemirrorMode(options.parser)}
|
||||
rulerColumn={options.printWidth}
|
||||
value={content}
|
||||
onChange={this.setContent}
|
||||
/>
|
||||
{editorState.showAst ? (
|
||||
<DebugPanel value={codeAst} />
|
||||
) : null}
|
||||
{editorState.showDoc ? (
|
||||
<DebugPanel value={"doc here"} />
|
||||
) : null}
|
||||
<OutputPanel
|
||||
mode={getCodemirrorMode(options.parser)}
|
||||
value={formatted}
|
||||
rulerColumn={options.printWidth}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</PrettierFormat>
|
||||
</div>
|
||||
<div className="bottom-bar">
|
||||
<div className="bottom-bar-buttons">
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
|
||||
export default class extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = { formatted: "" };
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.format();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { code, options, ast } = this.props;
|
||||
if (
|
||||
prevProps.code !== code ||
|
||||
prevProps.options !== options ||
|
||||
prevProps.ast !== ast
|
||||
) {
|
||||
this.format();
|
||||
}
|
||||
}
|
||||
|
||||
format() {
|
||||
const { code, options, worker, ast } = this.props;
|
||||
worker
|
||||
.postMessage({ type: "format", code, options, ast })
|
||||
.then(result => this.setState(result));
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.props.children(this.state);
|
||||
}
|
||||
}
|
|
@ -16,22 +16,18 @@ export default function({
|
|||
return acc;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<div className="options">
|
||||
{CATEGORIES_ORDER.map(category => (
|
||||
<details key={category} className="sub-options" open="true">
|
||||
<summary>{category}</summary>
|
||||
return CATEGORIES_ORDER.map(category => (
|
||||
<details key={category} className="sub-options" open="true">
|
||||
<summary>{category}</summary>
|
||||
|
||||
{(optionsByCategory[category] || []).map(option => (
|
||||
<Option
|
||||
key={option.name}
|
||||
option={option}
|
||||
value={prettierOptions[option.name]}
|
||||
onChange={onOptionValueChange}
|
||||
/>
|
||||
))}
|
||||
</details>
|
||||
{(optionsByCategory[category] || []).map(option => (
|
||||
<Option
|
||||
key={option.name}
|
||||
option={option}
|
||||
value={prettierOptions[option.name]}
|
||||
onChange={onOptionValueChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
</details>
|
||||
));
|
||||
}
|
||||
|
|
|
@ -25,7 +25,7 @@ self.fs = { readFile: function() {} };
|
|||
os.homedir = function() {
|
||||
return "/home/prettier";
|
||||
};
|
||||
os.EOL = '\n';
|
||||
os.EOL = "\n";
|
||||
self.process = {
|
||||
argv: [],
|
||||
env: { PRETTIER_DEBUG: true },
|
||||
|
|
|
@ -88,11 +88,36 @@ self.onmessage = function(event) {
|
|||
delete options.doc;
|
||||
delete options.output2;
|
||||
|
||||
const response = {
|
||||
formatted: formatCode(message.code, options),
|
||||
ast: null,
|
||||
doc: null
|
||||
};
|
||||
|
||||
if (message.ast) {
|
||||
var actualAst;
|
||||
var errored = false;
|
||||
try {
|
||||
actualAst = prettier.__debug.parse(message.code, options).ast;
|
||||
ast = JSON.stringify(actualAst);
|
||||
} catch (e) {
|
||||
errored = true;
|
||||
ast = String(e);
|
||||
}
|
||||
|
||||
if (!errored) {
|
||||
try {
|
||||
ast = formatCode(ast, { parser: "json" });
|
||||
} catch (e) {
|
||||
ast = JSON.stringify(actualAst, null, 2);
|
||||
}
|
||||
}
|
||||
response.ast = ast;
|
||||
}
|
||||
|
||||
self.postMessage({
|
||||
uid: uid,
|
||||
message: {
|
||||
formatted: formatCode(message.code, options)
|
||||
}
|
||||
message: response
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue