remove dead code
Lucas Duailibe
parent
f90560e6e9
commit
1f7e48aa46
|
|
@ -6,237 +6,3 @@ import ReactDOM from "react-dom";
|
|||
import Playground from "./Playground";
|
||||
|
||||
ReactDOM.render(<Playground />, document.getElementById("root"));
|
||||
|
||||
/******************************************/
|
||||
|
||||
(function() {
|
||||
function BottomBar(props) {
|
||||
return h(
|
||||
"div",
|
||||
{ class: "bottom-bar" },
|
||||
h(
|
||||
"div",
|
||||
{ class: "bottom-bar-buttons" },
|
||||
h(
|
||||
Button,
|
||||
{ onClick: props.onShowOptionsClick },
|
||||
props.optionsOpen ? "Hide options" : "Show options"
|
||||
),
|
||||
h(Button, { onClick: props.onClearClick }, "Clear")
|
||||
),
|
||||
h(
|
||||
"div",
|
||||
{ class: "bottom-bar-buttons bottom-bar-buttons-right" },
|
||||
h(Button, null, "Copy Link"),
|
||||
h(Button, null, "Copy markdown"),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
href:
|
||||
"https://github.com/prettier/prettier/issues/new?body=" +
|
||||
encodeURIComponent(props.reportBody),
|
||||
target: "_blank",
|
||||
rel: "noopener",
|
||||
class: "btn"
|
||||
},
|
||||
"Report issue"
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
var App = createClass({
|
||||
state: Object.assign(
|
||||
{ loaded: false, formatted: "" },
|
||||
loadPersistedState()
|
||||
),
|
||||
|
||||
handleOptionChange: function(option, value) {
|
||||
this.setState(function(state) {
|
||||
return {
|
||||
options: Object.assign({}, state.options, { [option.name]: value })
|
||||
};
|
||||
}, this._format.bind(this));
|
||||
},
|
||||
handleOptionsOpen: function() {
|
||||
this.setState(
|
||||
function(state) {
|
||||
return {
|
||||
editorState: Object.assign({}, state.editorState, {
|
||||
optionsOpen: !state.editorState.optionsOpen
|
||||
})
|
||||
};
|
||||
},
|
||||
function() {
|
||||
persistState(this.state);
|
||||
}
|
||||
);
|
||||
},
|
||||
handleContentChange: function(value) {
|
||||
this.setState({ content: value }, this._format.bind(this));
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this._worker = new WorkerApi("/worker2.js");
|
||||
|
||||
this._worker.postMessage(
|
||||
{ type: "meta" },
|
||||
function(message) {
|
||||
var availableOptions = getOptions(message.supportInfo.options);
|
||||
var options =
|
||||
this.state.options ||
|
||||
availableOptions.reduce(function(options, opt) {
|
||||
options[opt.name] = opt.default;
|
||||
return options;
|
||||
}, {});
|
||||
|
||||
this.setState({
|
||||
loaded: true,
|
||||
version: message.version,
|
||||
availableOptions: availableOptions,
|
||||
options: options
|
||||
});
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
this._format();
|
||||
},
|
||||
|
||||
render: function(props, state) {
|
||||
if (!state.loaded) {
|
||||
return "Loading...";
|
||||
}
|
||||
var editorState = state.editorState;
|
||||
return h(
|
||||
"div",
|
||||
{ className: "playground-container" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "editors-container" },
|
||||
h(Options, {
|
||||
availableOptions: state.availableOptions,
|
||||
options: state.options,
|
||||
open: editorState.optionsOpen,
|
||||
onOptionChange: this.handleOptionChange.bind(this)
|
||||
}),
|
||||
h(
|
||||
"div",
|
||||
{ className: "editors" },
|
||||
h(InputEditor, {
|
||||
mode: getCodemirrorMode(state.options),
|
||||
value: state.content,
|
||||
onChange: this.handleContentChange.bind(this)
|
||||
}),
|
||||
h(OutputEditor, {
|
||||
mode: getCodemirrorMode(state.options),
|
||||
value: state.formatted
|
||||
})
|
||||
)
|
||||
),
|
||||
h(BottomBar, {
|
||||
optionsOpen: editorState.optionsOpen,
|
||||
onShowOptionsClick: this.handleOptionsOpen.bind(this),
|
||||
onClearClick: function() {
|
||||
this.handleContentChange("");
|
||||
}.bind(this),
|
||||
reportBody: formatMarkdown(
|
||||
state.content,
|
||||
state.formatted,
|
||||
"",
|
||||
state.version,
|
||||
window.location.href,
|
||||
state.options,
|
||||
state.availableOptions.reduce(function(cliOptions, option) {
|
||||
var value = state.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;
|
||||
}, [])
|
||||
)
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// -------- UTILITY FUNCTIONS --------
|
||||
|
||||
function loadPersistedState() {
|
||||
var editorState = { optionsOpen: false };
|
||||
try {
|
||||
Object.assign(
|
||||
editorState,
|
||||
JSON.parse(window.localStorage.getItem("editorState"))
|
||||
);
|
||||
} catch (error) {
|
||||
// noop
|
||||
}
|
||||
var queryState = parseQuery() || {};
|
||||
return {
|
||||
editorState: editorState,
|
||||
content: typeof queryState.content === "string" ? queryState.content : "",
|
||||
options: queryState.options
|
||||
};
|
||||
}
|
||||
|
||||
function persistState(state) {
|
||||
try {
|
||||
window.localStorage.setItem(
|
||||
"editorState",
|
||||
JSON.stringify(state.editorState)
|
||||
);
|
||||
} catch (_) {
|
||||
// noop
|
||||
}
|
||||
saveQuery({ content: state.content, options: state.options });
|
||||
}
|
||||
|
||||
function getCodemirrorMode(options) {
|
||||
switch (options.parser) {
|
||||
case "css":
|
||||
case "less":
|
||||
case "scss":
|
||||
return "css";
|
||||
case "markdown":
|
||||
return "markdown";
|
||||
default:
|
||||
return "jsx";
|
||||
}
|
||||
}
|
||||
|
||||
// Parse the URL hash as a config object
|
||||
function parseQuery() {
|
||||
var hash = document.location.hash.slice(1);
|
||||
try {
|
||||
// providing backwards support for old json encoded URIComponent
|
||||
if (hash.indexOf("%7B%22") !== -1) {
|
||||
return JSON.parse(decodeURIComponent(hash));
|
||||
}
|
||||
return JSON.parse(LZString.decompressFromEncodedURIComponent(hash));
|
||||
} catch (error) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function saveQuery(state) {
|
||||
var hash = LZString.compressToEncodedURIComponent(JSON.stringify(state));
|
||||
if (
|
||||
typeof URL === "function" &&
|
||||
typeof history === "object" &&
|
||||
typeof history.replaceState === "function"
|
||||
) {
|
||||
var url = new URL(location);
|
||||
url.hash = hash;
|
||||
history.replaceState(null, null, url);
|
||||
} else {
|
||||
location.hash = hash;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue