in website/_webpack/js/tryFlow.js [353:569]
requirejs(["vs/editor/editor.main"], function() {
const location = window.location;
state.flow.then(function() {
removeClass(resultsNode, 'show-loading');
});
const headNode = document.getElementsByTagName('head')[0];
const styles = document.createElement('style');
styles.type = 'text/css';
styles.media = 'screen';
headNode.appendChild(styles);
const errorsTabNode = document.createElement('li');
errorsTabNode.className = "tab errors-tab";
errorsTabNode.appendChild(document.createTextNode('Errors'));
errorsTabNode.addEventListener('click', function(evt) {
removeClass(resultsNode, 'show-json');
removeClass(resultsNode, 'show-ast');
resultsNode.className += ' show-errors';
evt.preventDefault();
});
const jsonTabNode = document.createElement('li');
jsonTabNode.className = "tab json-tab";
jsonTabNode.appendChild(document.createTextNode('JSON'));
jsonTabNode.addEventListener('click', function(evt) {
removeClass(resultsNode, 'show-errors');
removeClass(resultsNode, 'show-ast');
resultsNode.className += ' show-json';
evt.preventDefault();
});
const astTabNode = document.createElement('li');
astTabNode.className = "tab ast-tab";
astTabNode.appendChild(document.createTextNode('AST'));
astTabNode.addEventListener('click', function(evt) {
removeClass(resultsNode, 'show-errors');
removeClass(resultsNode, 'show-json');
resultsNode.className += ' show-ast';
evt.preventDefault();
});
const versionSelector = document.createElement('select');
flowVersions.forEach(
function(version) {
const option = document.createElement('option');
option.value = version;
option.text = version;
option.selected = version == flowVersion;
versionSelector.add(option, null);
}
);
const versionTabNode = document.createElement('li');
versionTabNode.className = "version";
versionTabNode.appendChild(versionSelector);
const toolbarNode = document.createElement('ul');
toolbarNode.className = "toolbar";
toolbarNode.appendChild(errorsTabNode);
toolbarNode.appendChild(jsonTabNode);
toolbarNode.appendChild(astTabNode);
toolbarNode.appendChild(versionTabNode);
const errorsNode = document.createElement('pre');
errorsNode.className = "errors";
const jsonNode = document.createElement('pre');
jsonNode.className = "json";
const astNode = document.createElement('pre');
astNode.className = "ast";
resultsNode.appendChild(toolbarNode);
resultsNode.appendChild(errorsNode);
resultsNode.appendChild(jsonNode);
resultsNode.appendChild(astNode);
resultsNode.className += " show-errors";
const cursorPositionNode = document.querySelector('footer .cursor-position');
const typeAtPosNode = document.querySelector('footer .type-at-pos');
function onFlowErrors(errors) {
if (errorsNode) {
if (errors.length) {
removeChildren(errorsNode);
errorsNode.appendChild(printErrors(errors, editor));
} else {
errorsNode.innerText = 'No errors!';
}
}
if (jsonNode) {
removeChildren(jsonNode);
jsonNode.appendChild(
document.createTextNode(JSON.stringify(errors, null, 2))
);
}
if (astNode) {
state.flow
.then((flowProxy) => {
flowProxy.supportsParse()
.then(supportsParse => {
if (supportsParse) {
const options = {
esproposal_class_instance_fields: true,
esproposal_class_static_fields: true,
esproposal_decorators: true,
esproposal_export_star_as: true,
esproposal_optional_chaining: true,
esproposal_nullish_coalescing: true,
types: true,
};
flowProxy.parse(editor.getValue(), options).then(ast => {
removeChildren(astNode);
astNode.appendChild(
document.createTextNode(JSON.stringify(ast, null, 2))
);
astNode.dataset.disabled = "false";
});
} else if (astNode.dataset.disabled !== "true") {
astNode.dataset.disabled = "true";
removeChildren(astNode);
astNode.appendChild(
document.createTextNode(
"AST output is not supported in this version of Flow."
)
);
}
})
});
}
}
monaco.languages.register({
id: 'flow',
extensions: ['.js', '.flow'],
aliases: ['Flow'],
});
fetch('/static/syntaxes/flow-configuration.json')
.then(response => response.json())
.then(config => monaco.languages.setLanguageConfiguration('flow', config));
const languageId = monaco.languages.getEncodedLanguageId('flow');
monaco.languages.setTokensProvider('flow', createTokensProvider(languageId));
registry.then(registry => {
const colors = registry.getColorMap();
styles.innerHTML = generateTokensCSSForColorMap(colors);
});
const model = monaco.editor.createModel(
getHashedValue(location.hash) || defaultValue,
'flow',
monaco.Uri.file('-'),
);
const editor = monaco.editor.create(domNode, {
model: model,
minimap: { enabled: false },
scrollBeyondLastLine: false,
overviewRulerBorder: false,
theme: 'vs-light',
});
// typecheck on load
validate(state.flow, model, onFlowErrors);
model.onDidChangeContent(() => {
const value = model.getValue();
// typecheck on edit
validate(state.flow, model, onFlowErrors);
// update the URL
const encoded = LZString.compressToEncodedURIComponent(value);
history.replaceState(undefined, undefined, `#0${encoded}`);
localStorage.setItem('tryFlowLastContent', location.hash);
});
editor.onDidChangeCursorPosition((event) => {
const cursor = event.position;
const value = editor.getModel().getValue();
cursorPositionNode.innerHTML = `${cursor.lineNumber}:${cursor.column}`;
state.flow
.then(flowProxy => flowProxy.typeAtPos(
'-', value, cursor.lineNumber, cursor.column - 1
))
.then(result => {
// flow.js <= 0.125 incorrectly returned an ocaml string
// instead of a JS string, where the string value is hidden in a
// `c` property.
var typeAtPos = typeof result === "string"
? result
: result.c;
typeAtPosNode.title = typeAtPos;
typeAtPosNode.textContent = typeAtPos;
})
.catch(() => {
typeAtPosNode.title = '';
typeAtPosNode.textContent = '';
});
});
versionTabNode.addEventListener('change', function(evt) {
const version = evt.target.value;
resultsNode.className += ' show-loading';
state.flow = initFlow(version);
state.flow.then(function() {
removeClass(resultsNode, 'show-loading');
});
validate(state.flow, model, onFlowErrors);
});
});